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

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();

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

如:

Car.prototype.drivers = new Array("Mike","John");
oCar1.drivers.push("Bill");

posted on   念念卜妄  阅读(400)  评论(0编辑  收藏  举报

点击右上角即可分享
微信分享提示