JavaScript中定义类的方式详解

高手教程收集整理的这篇文章主要介绍高手教程。 师傅觉得非常好。 现在我就分享给大家，给大家一个参考。

本文中的示例描述了在 . 分享给大家，供大家参考，如下：

它本身不支持面向对象，没有访问控制字符，没有定义类的关键字class，不支持继承或冒号，也不支持虚函数。 不过，它是一种灵活的语言，下面我们来看看如何实现不使用关键字class的类定义并创建对象。

1.定义一个类并创建该类的实例对象

在 中，我们使用如下方式定义类：

function Shape()
{
var x = 1 ;
var y = 2 ;
}

你可能会说，怀疑？ 这不是函数定义吗？ 没错，这就是定义函数。 我们定义了一个 Shape 函数并初始化了 x 和 y。 不过，如果换个角度看，这是定义了一个Shape类，它有两个属性x和y，初始值分别是1和2，但是我们定义该类的关键字不是班级。

然后，我们可以创建 Shape 类的对象，如下所示：

标题">代码如下：

var = 新形状();

2.定义公有和私有属性

我们已经创建了该对象，但是当我们尝试访问其属性时，会出现错误，如下所示：

标题">代码如下：

.x = 1;

这意味着用 var 定义的属性是私有的。我们需要使用 this 关键字来定义公共属性

function Shape()
{
this .x = 1 ;
this .y = 2 ;
}

这样我们就可以访问Shape的属性了，比如。

标题">代码如下：

.x = 2;

好了，根据上面的代码我们可以得出结论：用var来定义类的属性，用this来定义类的属性。

3. 定义公共和私有方法

在 中，函数是类的实例，是间接继承的。 因此，函数也是对象。 因此，我们可以使用赋值的方法来创建函数。 当然，我们也可以将函数赋值给类的属性变量。 那么，这个属性变量就可以称为方法，因为它是一个可执行函数。 代码如下所示：

function Shape()
{
var x = 0 ;
var y = 1 ;
this .draw = function ()
{
// print; 
};
}

我们在上面的代码中定义了一个平局，并为其分配了一个。 接下来我们就可以调用这个函数了，在OOP中称为公共方法，如：

标题">代码如下：

。画（）;

如果用var定义的话，那么这个draw就变成了，在OOP中称为私有方法，比如

function Shape()
{
var x = 0 ;
var y = 1 ;
var draw = function ()
{
// print; 
};
}

这样就无法使用.draw来调用这个函数。

3.构造函数

它不支持OOP，所以当然没有构造函数。 不过，我们可以自己模拟一个构造函数，这样在创建对象时就会自动调用它。 代码如下：

function Shape()
{
var init = function ()
{
// 构造函数代码 
};
init();
}

在Shape的最后，我们人为的调用了init函数，那么，在创建Shape对象的时候，init总是会被自动调用，这样就可以模拟我们的构造函数了。

四、带参数的构造函数

如何让构造函数带参数？其实很简单，只需要把要传递的参数写到函数的参数列表中即可，比如

function Shape(ax,ay)
{
var x = 0 ;
var y = 0 ;
var init = function ()
{
// 构造函数 
x = ax;
y = ay;
};
init();
}

有了这个，我们可以创建这样的对象：

标题">代码如下：

第6073章

5. 静态属性和静态方法

如何在?中定义静态属性和方法，如下

function Shape(ax,ay)
{
var x = 0 ;
var y = 0 ;
var init = function ()
{
// 构造函数 
x = ax;
y = ay;
};
init();
}
Shape.count = 0 ; // 定义一个静态属性count，这个属性是属于类的，不是属于对象的。 
Shape.staticMethod = function (){}; // 定义一个静态的方法

有了静态属性和方法，我们就可以使用类名来访问它，如下

alert ( aShape.count );
aShape.staticMethod();

注意：静态属性和方法是公共的。 目前还不知道如何将静态属性和方法设为私有~

6.在方法中访问该类的公有和私有属性

在类的方法中访问您自己的属性。 公共属性和私有属性的访问方式不同。 请看下面的代码

function Shape(ax,ay)
{
var x = 0 ;
var y = 0 ;
this .gx = 0 ;
this .gy = 0 ;
var init = function ()
{
x = ax; // 访问私有属性，直接写变量名即可 
y = ay;
this .gx = ax; // 访问公有属性，需要在变量名前加上this. 
this .gy = ay;
};
init();
}

七、注意事项

根据作者的经验，类中的this并不总是指向我们的对象本身。 主要原因是它不是OOP语言，函数和类都是定义的，这当然会带来一些小问题。

当this指针错误时，通常是在事件处理中。 我们希望对象的成员函数能够响应事件。 当事件被触发时，系统会调用我们的成员函数。 但是，传递过来的this指针已经不再是我们自己的对象了，当然，这时候在成员函数中调用this当然会出错。

解决方案是我们在定义类之初将其保存在私有属性中，稍后我们可以使用该属性来代替 this。 我用这个方法使用这个指针还是比较安全的，很省心~

我们修改一下代码来解决这个问题。对比第六部分的代码，你一定明白了

function Shape(ax,ay)
{
var _this = this ; // 把this保存下来，以后用_this代替this，这样就不会被this弄晕了 
var x = 0 ;
var y = 0 ;
_this.gx = 0 ;
_this.gy = 0 ;
var init = function ()
{
x = ax; // 访问私有属性，直接写变量名即可 
y = ay;
_this.gx = ax; // 访问公有属性，需要在变量名前加上this. 
_this.gy = ay;
};
init();
}

上面我们讲了如何在 中定义类，创建类的对象，创建公有和私有的属性和方法，创建静态属性和方法，模拟构造函数，以及讨论@@的this。

以上是最实用的内容。 一般来说，用上面的代码定义类和创建对象就足够了。 当然，你也可以使用 or 来定义类并创建对象。 我用过这个框架，感觉非常好。 它更加完美地模拟了类，并且还支持类继承。 有兴趣的读者可以尝试一下。 当然，如果使用框架的话，需要在网页中包含相关的js头文件，所以我还是希望读者能够在不使用框架的情况下创建类，这样代码效率更高，同时你也可以看到，创建一个简单的类并不麻烦~

补充：

类定义有四种类型：

// 1、工厂方式
function createCar(name,color,pricE){
  var tempcar=new Object;
  tempcar.name=name;
  tempcar.color=color;
  tempcar.price=price;
  tempcar.getName=function(){
   document.write(this.name+"-----"+this.color+"
");
  };
  return tempcar;
}
var car1=new createCar("工厂桑塔纳","red","121313");
car1.getName();

// 2、构造函数方式
function Car(name,pricE){
  this.name=name;
  this.color=color;
  this.price=price;
  this.getColor=function(){
   document.write(this.name+"-----"+this.color+"
");
  };
}
var car2=new Car("构造桑塔纳","121313");
car2.getColor(); 

// 3、原型方式
function proCar(){
}
proCar.prototype.name="原型";
proCar.prototype.color="blue";
proCar.prototype.price="10000";
proCar.prototype.getName=function(){
  document.write(this.name+"-----"+this.color+"
");
};
var car3=new proCar();
car3.getName();

// 4、动态原型方式
function autoProCar(name,pricE){
  this.name=name;
  this.color=color;
  this.price=price;
  this.drives=new Array("mike","sue");
  if(typeof autoProCar.initialized== "undefined"){
   autoProCar.prototype.getName =function(){
   document.write(this.name+"-----"+this.color+"
");
   };
   autoProCar.initialized=true;
  }
}
var car4=new autoProCar("动态原型","yellow","1234565");
car4.getName();
car4.drives.push("newOne");
document.write(car4.drives);

希望这篇文章对大家的编程有所帮助。

概括

以上就是大佬教程为您收集整理的全部内容。 希望本文能够帮助您解决遇到的程序开发问题。

如果您觉得大佬教程网站的内容还不错，欢迎向程序员朋友推荐大佬教程。