WEB开发网
开发学院网页设计JavaScript ECMAScript对象基础 阅读

ECMAScript对象基础

 2010-09-14 13:06:37 来源:WEB开发网   
核心提示: 这样的方式有个新问题,那就是每次构造一个对象都将重复生成函数showColor,ECMAScript对象基础(2),为每个对象创建独立的函数版本,3)原型方式function Car() {}Car.prototype.color = "red";Car.prototy

这样的方式有个新问题,那就是每次构造一个对象都将重复生成函数showColor,为每个对象创建独立的函数版本。

3)原型方式

function Car() {
}
  
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.mpg = 23;
Car.prototype.drivers = new Array("Mike", "Sue");
Car.prototype.showColor = function () {
  alert(this.color);
};
  
var oCar1 = new Car();
var oCar2 = new Car();
  
oCar1.drivers.push("Matt");
  
alert(oCar1.drivers);  //outputs "Mike,Sue,Matt"
alert(oCar2.drivers);  //outputs "Mike,Sue,Matt"

利用对象的prototype属性来构造对象,但是有两个问题:没办法使用构造函数传参来生成对象;函数虽然被不同对象共享,但是属性竟然也被共享,比如上面代码中,oCar1的drivers属性与oCar2的drivers属性是同一个Array对象。

4)为了解决上面问题,我们引入了构造函数/原型的混合方式:

function Car(sColor, iDoors, iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike", "Sue");
}
  
Car.prototype.showColor = function () {
  alert(this.color);
};
  
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
  
oCar1.drivers.push("Matt");
  
alert(oCar1.drivers);  //outputs "Mike,Sue,Matt"
alert(oCar2.drivers);  //outputs "Mike,Sue"

属性通过构造函数方式,而函数则通过原型来生成,这就避免了纯粹原型方式带来的问题。但是函数放在对象的构造函数定义,让习惯java,c++的人也感觉不爽,对象为什么不能放在一块地方定义呢?这就引出来了动态原型方式

5)动态原型方式:

function Car(sColor, iDoors, iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike", "Sue");
  
  if (typeof Car._initialized == "undefined") {
  
    Car.prototype.showColor = function () {
      alert(this.color);
    };
  
    Car._initialized = true;
  }
}
  
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);

通过引入_initialized 属性,当第一次构造对象时生成方法showColor ,再次生成对象时,此时的_initialized 已经是true,就避免了重复生成函数,属性的定义和函数的定义都在构造函数内,也满足了语义上的对象封装概念。

我们应当尽量采用 构造函数/原型混合方式 和 动态原型方式 来创建ECMAScript对象。

上一页  1 2 

Tags:ECMAScript 对象 基础

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接