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

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

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

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

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

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

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

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

2. 工廠模式

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

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

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

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

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

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

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

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

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

4. 原型模式

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

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

Animal.prototype.isPrototypeOf(animal1);

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

animal1.hasOwnProperty(name);//true

屬性能通過(guò)對(duì)象訪問(wèn)：

name in animal1;//true

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

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

用字面量來(lái)實(shí)現(xiàn)更簡(jiǎn)單的原型語(yǔ)法

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

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

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

然而,當(dāng)用對(duì)象字面量來(lái)添加原型屬性時(shí):

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

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

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);
    }
    //...
}

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

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

二、繼承

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

1. 原型鏈

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

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被換成另一個(gè)對(duì)象，所以constructor屬性要重寫，否則會(huì)指向Animal.
var cat1 = new Cat();

其中的原型鏈：

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

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

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

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

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

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

3. 組合繼承

使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，使用借用構(gòu)造函數(shù)實(shí)現(xiàn)對(duì)實(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í)別。

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

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