ES5:深入解析如何js定义类或对象。

时间：2024-01-18 22:20:44

1.原始方式

var oCar = new  Object;

oCar.color = "blue";

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

缺点：需要创建多个oCar的实例；

2.工厂方式

解释：使用工厂函数（factory function）

function carFactory（）{

　　var oCar = new Object;

　　oCar.color = "blue";

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

　　return oCar;

}

var oCar1 = carFactory();

var oCar2 = carFactory();

此时，虽然解决了原始方式中，创建多个实例的缺点，但是两个对象oCar1与oCar2的属性一模一样；

优化1：

function carFactoty(col){

　　var oCar = new Object;

　　oCar.color  = col;

　　oCar.showColor = function(){alert(this.color)}

}

var oCar1 = carFactoty("blue");

var oCar2 = carFactoty("red");

oCar1.showColor();

oCar2.showColor();

此时，通过向工厂函数传递参数的方法，改变了两个对象默认属性值一样的问题。

缺点：每次调用carFactory方法，都要创建一次showColor方法，意味着每个对象有自己的showColor版本，其实，两个对象只需共享同一个函数就可以了。

优化2：

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

function carFactory(col){

　　var oCar = new Object;

　　oCar.color = col;

　　oCar.showColor = showColor;

}

var oCar1 = carFactory("blue");

var oCar2 = carFactory("red");

oCar1.showColor();

oCar2.showColor();

此时，虽然解决了优化1中的showColor()在不同对象中不同版本的问题，然而，新定义的showColor（）方法，却不像是对象的方法。

3.构造函数方式

解释：在构造函数内没有创建对象，而是使用this关键字，在使用new运算符执行构造函数时，会在执行代码之前创建一个对象，使用this访问该对象，通过this给对象赋予属性和方法。默认返回this。

function consFactory（col）{

　　this.color = col;

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

}

var oCar1 = new consFactory("red");

var oCar2 = new consFactory("blue");

此时，就像工厂函数，构造函数会重复生成函数，为每个对象都创建独立的函数版本

4.原型方式

解释：通过给proFunction的prototype属性添加属性，从而给proFunction添加属性。oCar1存放的实际上是指向showColor的指针，这样所有的属性，看起来都属于同一对象了。

注意：在构造函数的原型中，是不能接受构造函数的参数的。也就是，不能通过参数来初始化属性的值。

function proFunction(){};

proFunction.prototype.color = “blue”;

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

var oCar1 = new proFunction();

var oCar2  = new proFunction();

此时，在创建对象后才能真正改变属性的默认值，最痛点是，当属性指向的是对象时，对象不能被多个实例共享。

如：

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 是指向 Array 对象的指针，该数组中包含两个名字 "Mike" 和 "John"。由于 drivers 是引用值，Car 的两个实例都指向同一个数组。
这意味着给 oCar1.drivers 添加值 "Bill"，在 oCar2.drivers 中也能看到。输出这两个指针中的任何一个，结果都是显示字符串 "Mike,John,Bill"。
5.构造函数/原型混合方式

相关文章