JavaScript定义类或对象

JavaScript的各种书籍说的可能会有点凌乱，今天看一下ECMAScript对定义类或对象的相关文档。

面向对象语言不仅能够使用预定义对象还能够创建自己专用的类和对象。

原始方式

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function(){
	alert(this.color);
}

对象的属性可以在对象创建后动态定义。上例中，创建对象oCar，然后给它设置几个属性。最后一个属性实际上是指向函数的指针，意味着该属性是个方法。

缺点：需要创建多个car的实例时麻烦。用工厂方式解决

工厂方式

开发者创造了能创建并返回特定类型的对象的工厂函数（factory function）。

function createCar(){
var oTempCar = new Object;
oTempCar.color = "blue";
oTempCar.doors = 4;
oTempCar.mpg = 25;
oTempCar.showColor = function(){
	alert(this.color);
};
return oTempCar;
}
var oCar1 = createCar();
var oCar2 = createCar();

上例中createCar()函数封装了创建car对象的操作。调用此函数，将创建新对象，并赋予它所有必要的属性，复制出一个car对象。这样，就很容易地创建car对象的两个版本（类的两个实例）oCar1和oCar2。

带参数传递的:

function createCar(sColor,iDoors,iMpg){
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = function(){
	alert(this.color);
};
return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();		//输出 "red"
oCar2.showColor();		//输出 "blue"

oCar1和oCar2两个对象具有相同的属性，却有不同的属性值。

在工厂函数外定义对象的方法

function showColor() {
  alert(this.color);
}

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = showColor;
  return oTempCar;
}

var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);

oCar1.showColor();		//输出 "red"
oCar2.showColor();		//输出 "blue"

在函数 createCar() 之前定义了函数 showColor()。在 createCar() 内部，赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲，这样解决了重复创建函数对象的问题；但是从语义上讲，该函数不太像是对象的方法。

 

构造函数方式

创建构造函数就像创建工厂函数一样容易。第一步选择类名，即构造函数的名字。根据惯例，这个名字的首字母大写，以使他与首字母通常是小写的变量名分开。除了这点不同，构造函数看起来很像工厂函数。

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.showColor = function() {
    alert(this.color);
  };
}

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

与工厂方式的差别。首先在构造函数内没有创建对象，而是使用this关键字。使用new运算符构造函数时，在执行第一行代码前创建一个对象，只有this才能访问该对象。然后可以直接赋予this属性，默认情况下是构造函数的返回值（不必明确使用return运算符）。

缺点：就像工厂函数，构造函数会重复生成函数，为每个对象都创建独立的函数版本。不过，与工厂函数相似，也可以用外部函数重写构造函数，同样地，这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。

 

原型方式

该方式利用了对象的prototype属性，可以把它看成创建新对象所以来的原型。

这里，首先用空构造函数来设置类名。然后所有的属性和方法都被直接赋予prototype属性。

function Car() {
}

Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car();
var oCar2 = new Car();

这段代码中，首先定义构造函数（Car），其中无任何代码。接下来的几行代码，通过给Car的prototype属性去定义Car对象的属性。调用new Car()时，原型的所有属性都被立即赋予要创建的对象，意味着所有Car实例存放的都是指向showColor()函数的指针。从语义上讲，所有属性看起来都属于一个对象，因此解决了前面两种方式存在的问题。

缺点：首先，这个构造函数没有参数。使用原型方式，不能通过给构造函数传递参数来初始化属性的值，因而Car1和Car2的属性值相同。这意味着必须在对象创建后才能改变属性的默认值。当属性指向的不是函数时比如下例中的drivers属性，此时该属性指向的对象是对象实例共享的，但是被共享的属性一般很少。

function Car() {
}

Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.drivers = new Array("Mike","John");
Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car();
var oCar2 = new Car();

oCar1.drivers.push("Bill");

alert(oCar1.drivers);	//输出 "Mike,John,Bill"
alert(oCar2.drivers);	//输出 "Mike,John,Bill"

 

由于 drivers 是引用值，Car 的两个实例都指向同一个数组。这意味着给 oCar1.drivers 添加值 "Bill"，在 oCar2.drivers 中也能看到。输出这两个指针中的任何一个，结果都是显示字符串 "Mike,John,Bill"。说了半天，就是通过prototype扩展对象时，扩展的方法或属性将适用于对象的所有实例。

 

混合的构造函数/原型方式

用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数属性（方法）。结果是，所有函数都只创建一次，而每个对象都具有自己的对象属性实例。

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
}

Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

oCar1.drivers.push("Bill");

alert(oCar1.drivers);	//输出 "Mike,John,Bill"
alert(oCar2.drivers);	//输出 "Mike,John"

动态原型方式

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
  
  if (typeof Car._initialized == "undefined") {
    Car.prototype.showColor = function() {
      alert(this.color);
    };
	
    Car._initialized = true;
  }
}

直到检查 typeof Car._initialized 是否等于 "undefined" 之前，这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义，构造函数将用原型方式继续定义对象的方法，然后把 Car._initialized 设置为 true。如果这个值定义了（它的值为 true 时，typeof 的值为 Boolean），那么就不再创建该方法。简而言之，该方法使用标志（_initialized）来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次，传统的 OOP 开发者会高兴地发现，这段代码看起来更像其他语言中的类定义了。