隨筆檔案

      從基礎(chǔ)講起，從重點(diǎn)講起！我覺得祝子這個(gè)系列的文章非常好，不管是對(duì)于javascript的入門同學(xué)還是有一定javascript經(jīng)驗(yàn)的老手都是個(gè)很好的系統(tǒng)學(xué)習(xí)資料。來自經(jīng)典的《javascript高級(jí)程序設(shè)計(jì)》。

原文出處：http://www.aygfsteel.com/ilovezmh/archive/2007/04/16/111098.html

一、定義類或?qū)ο?br>1.工廠方式
創(chuàng)建對(duì)象car
var oCar = new Object;
oCar.color = "red";
oCar.doors = 4;
oCar.mpg = 23;
oCar.showColor = function(){
   alert(this.corlor);
};

創(chuàng)建多個(gè)car
function createCar(color, doors, mpg) {
    var tempcar = new Object;
    tempcar.color = color;
    tempcar.doors = doors;
    tempcar.mpg = mpg;
    tempcar.showColor = function () {
        alert(this.color)
    };
   return tempcar;
}

var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor();    //outputs "red"
car2.showColor();    //outputs "blue"
這個(gè)例子中，每次調(diào)用函數(shù)createCar()，都要?jiǎng)?chuàng)建新函數(shù)showColor()，意味著每個(gè)對(duì)象都有自己的showColor()版本，事實(shí)上，每個(gè)對(duì)象都共享了同一個(gè)函數(shù)。
有些開發(fā)者在工廠函數(shù)外定義對(duì)象的方法，然后通過屬性指向該方法，從而避開這個(gè)問題。
function showColor(){
   alert(this.color);
}
function createCar(color, doors, mpg) {
    var tempcar = new Object;
    tempcar.color = color;
    tempcar.doors = doors;
    tempcar.mpg = mpg;
    tempcar.showColor = showColor;
    return tempcar;
}

var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor();    //outputs "red"
car2.showColor();    //outputs "blue"
從功能上講，這樣解決了重復(fù)創(chuàng)建函數(shù)對(duì)象的問題，但該函數(shù)看起來不像對(duì)象的方法。所有這些問題引發(fā)了開發(fā)者定義的構(gòu)造函數(shù)的出現(xiàn)。

2.構(gòu)造函數(shù)方法
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);
oCar1.showColor();    //outputs "red"
oCar2.showColor();    //outputs "blue"
就像工廠函數(shù)，構(gòu)造函數(shù)會(huì)重復(fù)生成函數(shù)，為每個(gè)對(duì)象都創(chuàng)建獨(dú)立的函數(shù)版本。不過，也可以用外部函數(shù)重寫構(gòu)造函數(shù)，同樣，這么做語義上無任何意義。

3.原型方式
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors= 4;
Car.prototype.mpg= 23;
Car.prototype.showColor = function(){
   alert(this.color);
}

var oCar1 = new Car();
var oCar2 = new Car();
它解決了前面兩種方式存在的兩個(gè)問題。但并不盡人意。首先，這個(gè)構(gòu)造函數(shù)沒有參數(shù)。使用原型方式時(shí)，不能通過構(gòu)造函數(shù)傳遞參數(shù)初始化屬性的值，這點(diǎn)很令人計(jì)厭，但還沒完，真正的問題出現(xiàn)在屬性指向的是對(duì)象，而不是函數(shù)時(shí)。考慮下面的例子：
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"

4.混合的構(gòu)造函數(shù)/原型方式
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"
現(xiàn)在就更像創(chuàng)建一般對(duì)象了。所有的非函數(shù)屬性都有構(gòu)造函數(shù)中創(chuàng)建，意味著又可用構(gòu)造函數(shù)的參數(shù)賦予屬性默認(rèn)值了。因?yàn)橹粍?chuàng)建showColor()函數(shù)的一個(gè)實(shí)例，所以沒有內(nèi)存浪費(fèi)。

5.動(dòng)態(tài)原型方法
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);

oCar1.drivers.push("Matt");

alert(oCar1.drivers);    //outputs "Mike,Sue,Matt"
alert(oCar2.drivers);    //outputs "Mike,Sue"
動(dòng)態(tài)原型方法的基本想法與混合的構(gòu)造函數(shù)/原型方式相同，即在構(gòu)造函數(shù)內(nèi)定義非函數(shù)屬性，而函數(shù)屬性則利用原型屬性定義。唯一的區(qū)別是賦予對(duì)象方法的位置。

6.混合工廠方式
這種方式通常是在不能應(yīng)用前一種方式時(shí)的變通方法。它的目的是創(chuàng)建假構(gòu)造函數(shù)，只返回另一種對(duì)象的新實(shí)例。
function Car() {
    var tempcar = new Object;
    tempcar.color = "red";
    tempcar.doors = 4;
    tempcar.mpg = 23;
    tempcar.showColor = function () {
        alert(this.color)
    };
   return tempcar;
}
與經(jīng)典方式不同，這種方式使用new運(yùn)算符，使它看起來像真正的構(gòu)造函數(shù)。

7.采用哪種方式
   如前所述，目前使用最廣泛的是混合的構(gòu)造函數(shù)/原型方式。些外，動(dòng)態(tài)原型方法也很流行，在功能上與前者等價(jià)，可以采用這兩種方式中的任何一種。

二、修改對(duì)象
1.創(chuàng)建新方法
可以用prototype屬性為任何已有的類定義新方法，就像處理自己的類一樣。
例：
Array.prototype.indexOf = function(vItem){
   for(var i=0;i<this.length;i++){
      if(vItem == this[i]){
         return i;
      }
   }
   retunr -1;
}
最后，如果想給ECMAScript中的每個(gè)本地對(duì)象添加新方法，必須在Object對(duì)象的prototype屬性上定義它。

2.重定義已有方法
就像能給自己的類定義新方法一樣，也可重定義已有的方法。函數(shù)名只是指向函數(shù)的指針，因此可以輕易地使它指向其他函數(shù)。
如
Function.prototype.toString = function(){
   return "Function code hidden";
}
function sayHi(){
   alert("hi");
}
alert(sayHi.toString());      //outputs "Function code hidden"