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的面向對象編程。混合的構造函數/原型方式是最經常使用的，再不能用這種方式的時候，就一般採用混合工廠方式。