JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)

wfc_666 發(fā)布于2019-08-20 10:51 / 2827人閱讀

摘要：構(gòu)造函數(shù)模式這種方法創(chuàng)建自定義的構(gòu)造函數(shù)，從而自定義對象類型的屬性和方法。借用構(gòu)造函數(shù)在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)，通過和方法來實(shí)現(xiàn)。

JavaScript中沒有類的概念，它不是嚴(yán)格意義上的面向?qū)ο笳Z言，而是基于對象(Object-based)的編程語言。下面是讀《JavaScript高級程序設(shè)計(jì)（第三版）》的學(xué)習(xí)筆記，總結(jié)一些常用的創(chuàng)建對象和繼承的方法。

一、創(chuàng)建對象 1. 對象字面量

創(chuàng)建對象最簡單的方式就是創(chuàng)建一個Object的實(shí)例。通過先創(chuàng)建一個對象，再為它添加屬性和方法。此方法用對象字面量方式更為直觀：

var animal = {
    name : "mimi",
    sayName : function(){
        console.log(this.name);
    }
    //...
    }

★ 這種方法在創(chuàng)建多個對象時會產(chǎn)生大量重復(fù)的代碼，在創(chuàng)建單個對象時的首選模式。

2. 工廠模式

這種方法用函數(shù)來封裝以特定接口創(chuàng)建對象的細(xì)節(jié)：

function animal(name) {
    var o = new Object();//創(chuàng)建新對象
    o.name = "mimi";//給這個對象添加屬性
    //...
    return o;//返回這個對象
}

★ 這種方法沒有解決對象識別的方法，一定程度上解決創(chuàng)建多個相似對象的問題吧，不常使用。

3. 構(gòu)造函數(shù)模式

這種方法創(chuàng)建自定義的構(gòu)造函數(shù)，從而自定義對象類型的屬性和方法。

function Animal(name) {
    this.name = name;//將屬性和方法賦給this對象
    this.sayName = function(){
        console.log(this.name);
    }
    //...
}

它沒有顯式的創(chuàng)建對象也沒有返回語句，但在使用new操作符調(diào)用后經(jīng)歷了四個步驟：
（1）創(chuàng)建一個對象
（2）將函數(shù)的作用域賦給新對象（this指向了新對象）
（3）執(zhí)行函數(shù)中代碼
（4）返回新對象

所有對象都有一個constructor屬性，指向其構(gòu)造函數(shù)。constructor可以用來標(biāo)識對象類型，但是，要檢測對象類型，instanceof操作符更可靠。

★ 這種方法的問題在于，每個方法都會在每個實(shí)例上重新創(chuàng)建一次。

4. 原型模式

function Animal() {
}
Animal.prototype.name = "mimi";//將方法屬性添加到Animal的prototype屬性中
Animal.prototype.sayName = function(){
    console.log(this.name);
};
//...

無論何時，創(chuàng)建一個函數(shù)，都會自動創(chuàng)建一個prototype屬性，指向其原型對象，正如前面所說，每個對象都有一個constructor屬性，指向其構(gòu)造函數(shù)。所以Animal.prototype.constructor指向Animal。判斷原型對象與實(shí)例間關(guān)系可用isPrototypeOf()方法：

Animal.prototype.isPrototypeOf(animal1);

判斷屬性存在于實(shí)例中，還是存在與原型中：
屬性存在于實(shí)例中時：

animal1.hasOwnProperty(name);//true

屬性能通過對象訪問：

name in animal1;//true

在實(shí)例中添加了與原型中同名的屬性

我們將在實(shí)例中創(chuàng)建該屬性，而屏蔽原型中的屬性。當(dāng)然，我們可以通過delete操作符完全刪除實(shí)例中的該屬性而讓我們重新訪問到原型中的屬性(* ￣︿￣)。

用字面量來實(shí)現(xiàn)更簡單的原型語法

function Animal() {
}
Animal.prototype = {
    constructor : Animal,//必須必須！因?yàn)檫@樣相當(dāng)于創(chuàng)建了一個新對象并賦值給Animal.prototype，
//此時這個新對象的constructor為默認(rèn)的構(gòu)造函數(shù)Object啊盆友們( ?Д?)?
    name : "mimi",
    sayName : function(){
    console.log(this.name);
    }
}

另外，很重要的一點(diǎn)：調(diào)用構(gòu)造函數(shù)是會為實(shí)例添加一個指向最初原型的[[prototype]]指針，這個連接存在與實(shí)例和構(gòu)造函數(shù)的原型對象之間，而不是實(shí)例與構(gòu)造函數(shù)間。
我們將上面將上面的代碼稍加修改：

function Animal(name) {
}
animal1 = new Animal()//創(chuàng)建實(shí)例1
console.log(animal1.smell);//undefined;此時原型中還未添加smell屬性，理所當(dāng)然。
Animal.prototype.smell = "good";//添加原型屬性
console.log(animal1.smell);//可以訪問smell屬性。

然而,當(dāng)用對象字面量來添加原型屬性時:

function Animal(name) {
}
animal1 = new Animal()//創(chuàng)建實(shí)例1
console.log(animal1.smell);//undefined;此時原型中還未添加smell屬性，理所當(dāng)然。
Animal.prototype = {//添加原型屬性
    smell : "good";
}
console.log(animal1.smell);//undefined;
//因?yàn)閍nimal1在創(chuàng)建時[[prototype]]指針指向的是最初的原型，而字面量法添加原型屬性時將對象原型改變了，但[[prototype]]沒有跟著一起變化，所以無法訪問。

★ 這個方法的問題在于：1.它沒辦法傳遞初始化參數(shù) 2.對于引用類型值的屬性（A）來說，改變一個實(shí)例的A屬性會直接引起所有實(shí)例中的A屬性的變化，因?yàn)閷?shí)例中的A屬性只是其原型中A屬性的一個引用。

5. 組合使用構(gòu)造函數(shù)模式和原型模式

構(gòu)造函數(shù)模式用于定義實(shí)例屬性，原型模式用于定義方法和共享屬性。

function Animal(name) {//添加實(shí)例屬性
    this.name = name;
    this.color = ["yellow", "black"];
    //...
}
Animal.prototype = {//添加方法和共享屬性
    constructor : Animal,
    sayName : function(){
    console.log(this.name);
    }
    //...
}

★ 這個方法就是使用最廣泛、認(rèn)同度最高的創(chuàng)建自定義類型的方法啦。

小總結(jié)：第一種和最后一種是比較常用的方法了，書中還有提到一些方法，是在前面這些方法都不適用時可以選擇使用的，不過我還沒碰上啦，所以等以后碰上了再來補(bǔ)充。

二、繼承

JavaScript中不支持接口繼承（繼承方法簽名），都是支持實(shí)現(xiàn)繼承（繼承實(shí)際的方法），主要依賴原型鏈來實(shí)現(xiàn)。

1. 原型鏈

將父類的實(shí)例賦值給子類的原型，此時，父類的實(shí)例中包含一個指向父類原型的指針。子類的原型通過這個指針訪問到父類原型中的屬性。

function Animal(name) {//父類
    this.name = name;
}
Animal.prototype = {//將屬性添加到父類原型
    constructor : Animal,
    sayName : function(){
    console.log(this.name);
    }
}
function Cat() {//子類
}
Cat.prototype = new Animal();//將父類實(shí)例賦值給子類原型。
Cat.prototype.constructor = Cat;//prototype被換成另一個對象，所以constructor屬性要重寫，否則會指向Animal.
var cat1 = new Cat();

其中的原型鏈：

用instanceof操作符判定可得出cat1是Cat、Animal、Object的實(shí)例。

★ 此方法存在問題前面已有提及，就是包含引用類型值的原型屬性會被所有實(shí)例共享，且不能傳參。

2. 借用構(gòu)造函數(shù)

在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)，通過apply()和call()方法來實(shí)現(xiàn)。

function Animal(name) {//父類
    this.name = name;
}
function Cat(name) {//子類
    Animal.call(this, name);//執(zhí)行了一遍父類型構(gòu)造函數(shù)代碼
}
var cat1 = new Cat();

★ 此方法問題在于：1.方法都在構(gòu)造函數(shù)中定義，函數(shù)復(fù)用無從談起。2.在超類的原型中定義的方法對子類型也不可見。而且用instanceof也無法判定cat1與Animal的聯(lián)系。

3. 組合繼承

使用原型鏈實(shí)現(xiàn)對原型屬性和方法的繼承，使用借用構(gòu)造函數(shù)實(shí)現(xiàn)對實(shí)例屬性的繼承。

function Animal(name) {//父類添加實(shí)例屬性
    this.name = name;
}
Animal.prototype = {//父類原型添加方法和屬性
    constructor : Animal,
    sayName : function(){
    console.log(this.name);
    }
}
function Cat(name) {//子類
    Animal.call(this, name);//繼承屬性
}
Cat.prototype = new Animal();//繼承方法
Cat.prototype.constructor = Cat;//將constructor指回子類

★ 此方法是JS中最常用的繼承模式。而且用instanceof 和isPrototypeOf() 也能識別。

目前有實(shí)際用的就這些了，總結(jié)的比較基礎(chǔ)，希望也總結(jié)清楚了。

參考文獻(xiàn)：《JavaScript高級程序設(shè)計(jì)（第三版）》