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

1、你必須知道的

1) 字面量

2) 原型

3) 原型鏈

4) 構造函數

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

 

2、開始建立對象吧

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

 

3、總結

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

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