javascript高级编程学习笔记(一)——对象

一个完整的 JavaScript 实现是由如下 3 个不一样部分组成的：核心（ECMAScript），文档对象模型（DOM）和浏览器对象模型（BOM）组成。 前一篇写了关于DOM的理解与掌握，如今针对ECMAScript的学习作了一些整理，比较基础的就很少说了，并且www.w3school.com.cn里面已经说明的很清楚了，因此只是针对比较容易混淆的一些作一些笔记。

一、建立对象的方式： （1）原始方式

var oCar = new Object;

oCar.color = "blue";

oCar.doors = 4;

oCar.mpg = 25;

oCar.showColor = function() {

alert(this.color);

};

（2）工厂方式

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

上面的这种也能够改为为函数传递参数的类型：

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

可是上面的方式，每次建立一个对象的时候都须要建立一次函数 因此改为了下面的这种方式，可是语义上不太像是面向对象的方法：

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

（3）构造函数方式 可是依旧会出现重复生成函数的问题

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

（4）原型方式

最基本的原型方式以下： 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();

可是上面的这种有个问题，若是须要多个实例的话，共享对象是不可行的（以下例子，就是有问题的例子）：

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"

因此针对上面的问题有了混合的构造函数/原型方式（以下）：

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;

}

}

（7）混合工厂方式（相对于工厂方式，这种方式使它看起来像真正的构造函数，由于要使用new操做符）：

function Car() {

var oTempCar = new Object;

oTempCar.color = "blue";

oTempCar.doors = 4;

oTempCar.mpg = 25;

oTempCar.showColor = function() {

alert(this.color);

};

return oTempCar;

}

var car = new Car();

学习小结： prototype的出现主要是为了用于javascript的面向对象编程。混合的构造函数/原型方式是最经常使用的，再不能用这种方式的时候，就一般采用混合工厂方式。