不會JS中的OOP，你也太菜了吧！(第一篇)

一、你必須知道的

1) 字面量

2) 原型

3) 原型鏈

4) 構造函數

5) 穩妥對象(沒有公共屬性，而且其方法也不引用this的對象。穩妥對象適合用在安全的環境中和防止數據被其它程序改變的時候)

 

二、開始創建對象吧

<1>: 首先來看兩種最基本的創建對象的方法

1> 使用Object創建對象

var o = new Object();
o.sname = 'JChen___1';
o.showName = function(){
    return this.sname;
}

2> 使用對象字面量創建對象

var o = {
    name: 'JChen___2',
    getName: function(){
        return this.name;
    }
}

但是這兩個方式有個明顯的缺點：使用同一個接口創建很多對象，會產生大量的重復代碼。

 

<2> 接下來看看幾種創建對象的模式吧

1>工廠模式

function create(name){
    var o = new Object();
    o.name = name;
    o.sayName = function(){
        return this.name;
    };
    return o;
}
var p1 = create('JChen___');

工廠模式也有一個缺點：就是沒有解決對象識別的問題(即怎樣知道一個對象的類型)。

 

2> 構造函數模式

function create2(name){
    this.name = name;
    this.sayName = function(){
        return this.name;
    };
    //this.sayName = sayName;
}
//function sayName(){ return this.name};
var p1 = new create2('JChen___4');

構造函數模式也有一個缺點：就是每個方法都要在每個實例上創建一遍。

當然我們可以用上面的兩行注釋掉了代碼來屏蔽上面那個缺點。

但是……，我們又產生了一個新問題——全局變量。如果有很多方法，我們豈不是要定義很多個全局變量函數。這是個可怕的問題。

 

3> 原型模式

1) 普通方法

function create3(){}
create3.prototype.name = 'JChen___5';
create3.prototype.sayName = function(){
    return this.name;
};
var p1 = new create3();

 

2) 原型字面量方法——我姑且這么稱吧

function create3(){}
create3.prototype = {
    constructor: create3, //我們要設置它的constructor，如果它很重要
    name: 'JChen___5',
    sayName: function(){
        return this.name;
    }
};
var p1 = new create3();

原型的缺點：

1): 不能傳參

2): 共享了變量

 

4> 構造+原型(模式)

function create4(name){
    this.name = name;
}
create4.prototype.sayName = function(){
    return this.name;
}
var p1 = new create4('JChen___6');

這種模式是目前使用最廣泛、認同度最高的一種創建自定義類型的方法。

 

5> 動態原型模式

function create5(name){
    this.name = name;
    if(typeof this.sayName != 'function'){
        create5.prototype.sayName = function(){
            return this.name;
        }
    }
}
var p1 = new create5('JChen___7');

這種方法確實也是十分完美的一種方法。

 

6> 寄生構造函數模式

function create6(name){
    var o = new Object();
    o.name = name;
    o.sayName = function(){
        return this.name;
    }
    return o;
}
var p1 = new create6('JChen___8');

注意那個return o。構造函數在不返回值的情況下，會返回新對象實例。而通過在構造函數的末尾加入return 語句，可以重寫調用構造函數時返回的值。

這個種用法可以用在，假設我們想創建一個具有額外方法的特殊數組。由於不能直接修改Array的構造函數，因此可以使用這個模式。

function specialArray(){
    var values = new Array();

    values.push.apply(values, arguments);

    values.join2 = function(){
        return this.join('|');
    };

    return values;
}
var colors = new specialArray('red', 'blue', 'green');
colors.join2();//returned: red|blue|green 

 

7>穩妥構造函數模式

穩妥構造函數遵循與寄生構造函數類似的模式，但是有兩點不同：

一是新創建對象的實現方法不引用this

二是不使用new操作符調用構造函數。

function create7(name){
    var o = new Object();
    var age = 12;                //私有變量
    o.sayName = function(){      //私有方法
        return name + ' ' + age;
    }
    return o;
}
var p1 = create7('JChen___9');

 

三、總結

對象(類)的創建方法大概就這9種了吧。

創建是沒問題了，但是這是第一步，如何實現繼承呢？且看下回分解。