【JavaScript】重溫Javascript繼承機制

上段時間，團隊內部有過好幾回給力的分享，這裏對西風師傅分享的繼承機制稍做整理一下，適當加了些口語化的描述，留做備案。

1、講個故事吧

澄清在先，Java和Javascript是雷鋒和雷峯塔的關係。Javascript原名Mocha，當時還叫作LiveScript，創造者是Brendan Eich，現任Mozilla公司首席技術官。

1994年，歷史上第一個比較成熟的網絡瀏覽器——Navigator0.9版誕生在網景公司（Netscape），極爲轟動。可是，Navigator0.9只能用來瀏覽，不具有與訪問者交互的能力，好比，用戶提交一個數據表單，若是表單爲空，瀏覽器是沒法判斷的，只能直接提交給服務器端，再把空值的錯誤返回，讓用戶從新填寫，這樣顯然是低效率和浪費資源的。

這個時候，對於正處於技術革新最前沿的Netscape，開發一種實用的客戶端腳本語言來處理這些問題變得必要起來，因而，這個任務落到了工程師Brendan Eich身上。他以爲吧，木必要設計得很複雜，只要能搞定一些簡單操做就夠了，好比判斷用戶有沒有填寫表單。

1994年正是面向對象編程（object-oriented programming）的興盛時代，C++是最流行的語言，而Java語言的1.0版即將於次年推出，Brendan Eich不免受其影響，他想將Javascript裏面全部的數據類型看作是對象（object），這一點與Java很是類似。可是，他立刻就遇到了一個難題，到底要不要設計」繼承」機制呢？

2、繼承的演變

一、採用new關鍵字生成實例

處理表單驗證這樣簡單功能腳本語言顯然是不須要」繼承」機制的，然而若是Javascript裏面都是對象，就須要有一種辦法來把全部對象聯繫起來。最後，Brendan Eich仍是設計了」繼承」。只是，他並無引入」類」（class）的概念，由於一旦有了」類」，Javascript就是一種完整的面向對象編程語言了，這好像有點太正式了，與設計初衷也遠了，同時增長了初學者的入門難度。

參照到C++和Java語言都使用new命令來生成實例：

C++這樣寫：

ClassName *object = new ClassName(param);

Java這樣寫：

Foo foo = new Foo();

那麼，也能夠把new命令引入了Javascript，用來從原型對象生成一個實例對象。可是，Javascript中沒有」類」的話，怎樣表示原型對象呢？ 依然是參照C++和Java使用new命令時，都會調用」類」的構造函數（constructor）。Brendan Eich簡化了設計，在Javascript語言中，new命令後面跟的是構造函數，再也不是類。 咱們舉個例子來講，如今有一個叫作WD構造函數，表示前端開發（web-developper）對象的原型。

function WD(skill){
    this.skill = skill;
}

對這個構造函數使用new關鍵字，就會生成一個前端開發對象的實例。

var WD1 = new WD('html');
console.log(WD1.skill); // html

在構造函數中的this關鍵字，它其實表明的是新建立的實例對象。

二、new 出來對象的缺陷

採用new關鍵字，用構造函數生成實例對象沒法共享屬性和方法。 好比，在WD對象的構造函數中，設置一個實例對象的共有屬性skill。

function WD(skill){
    this.skill = skill;
    this.sex = '男';
}

而後，生成兩個實例對象：

var WD1 = new WD('html');
var WD2 = new WD('css');

這兩個對象的skill屬性是獨立的，修改其中一個，不會影響到另外一個。

WD1.skill= 'Javascript';
console.log(WD2.skill);//「css」，不受WD1的影響

每個實例對象，都有本身的屬性和方法的副本。這不只沒法作到數據共享，也是極大的資源浪費。

三、引入prototype屬性

爲了實現屬性和方法的共享，Brendan Eich決定爲構造函數設置一個prototype屬性。這個屬性包含一個對象（如下簡稱」prototype對象」），全部實例對象須要共享的屬性和方法，都放在這個對象裏面；那些不須要共享的屬性和方法，就放在構造函數裏面。實例對象一旦建立，將自動引用prototype對象的屬性和方法。也就是說，實例對象的屬性和方法，分紅兩種，一種是本地的，另外一種是引用的。仍是以WD構造函數爲例，如今用prototype屬性進行改寫：

function WD(skill){
    this.skill = skill;
}

WD.prototype = { sex : '男' };

var WD1 = new WD('html');
var WD2 = new WD('css');

console.log(WD1.sex); // 男
console.log(WD2.sex); // 男

如今，sex屬性放在prototype對象裏，是兩個實例對象共享的。只要修改了prototype對象，就會同時影響到兩個實例對象。

WD.prototype.sex = '女';
console.log(WD1.sex); //女
console.log(WD2.sex); // 女

因爲全部的實例對象共享同一個prototype對象，那麼從外界看起來，prototype對象就好像是實例對象的原型，而實例對象則好像」繼承」了prototype對象同樣。這就是Javascript繼承機制的設計思想。

3、構造函數如何實現繼承

如今有一個」MED」對象的構造函數（MED:Marketing Experience Design,營銷體驗設計）

function MED(){
    this.aim = "營銷體驗設計";
}

依然是」WD」對象的構造函數，

function WD(skill,sex){
    this.skill = skill;
    this.sex = sex;
}

怎樣才能使」WD」繼承」MED」呢？

1) apply綁定構造函數實現

最簡單的方法，大概就是使用call或apply方法，將父對象的構造函數綁定在子對象上，也就是在子對象構造函數中加一行：

function WD(skill,sex){

    MED.apply(this, arguments);

    this.skill = skill;
    this.sex = sex;
}

var WD1 = new WD("Html","男");
console.log(WD1.aim); // "營銷體驗設計"

2) prototype模式實現

咱們一般的作法是使用prototype屬性。若是」WD」的prototype對象，指向一個MED的實例，那麼全部」WD」的實例，就能繼承MED了。

WD.prototype = new MED();//咱們將WD的prototype對象指向一個MED的實例。
WD.prototype.constructor = WD;
var WD1 = new WD("Html","男");
console.log(WD1.aim); // 營銷體驗設計

這句

WD.prototype = new MED();

至關於徹底刪除了prototype 對象原先的值，而後賦予一個新值。那麼第二行又是什麼意思呢？

WD.prototype.constructor = WD;

原來，任何一個prototype對象都有一個constructor屬性，指向它的構造函數。也就是說，WD.prototype 這個對象的constructor屬性，是指向WD的。咱們在前一步已經刪除了這個prototype對象原來的值，因此新的prototype對象沒有constructor屬性，須要咱們手動加上去，不然後面的」繼承鏈」會出問題。這就是第二行的意思。

注意，這是很重要的一點，編程時務必要遵照，下文都遵循這一點，即若是替換了prototype對象，

o.prototype = {};

那麼，下一步必然是爲新的prototype對象加上constructor屬性，並將這個屬性指回原來的構造函數。

o.prototype.constructor = o;

3) 從prototype直接繼承實現

因爲MED對象中，不變的屬性均可以直接寫入MED.prototype。因此，咱們也可讓WD()跳過 MED()，直接繼承MED.prototype。 如今，咱們先將MED對象改寫：

function MED(){ }

MED.prototype.skill = "MED";

而後，將WD的prototype對象指向MED的prototype對象，這樣就完成了繼承。

WD.prototype = MED.prototype;
WD.prototype.constructor = WD;

var WD1 = new WD("Html","男");

console.log(WD1.skill); // MED

與前一種方法相比，這樣作的優勢是效率比較高（不用執行和創建MED的實例了），比較省內存。缺點是 WD.prototype和MED.prototype如今指向了同一個對象，那麼任何對WD.prototype的修改，都會反映到MED.prototype。因此，上面這一段代碼實際上是有問題的。請看第二行

WD.prototype.constructor = WD;

這一句實際上把MED.prototype對象的constructor屬性也改掉了！

console.log(MED.prototype.constructor); // WD

4) 利用一個空對象做爲中介來實現

因爲」直接繼承prototype」存在上述的缺點，因此能夠利用一個空對象做爲中介。

var F = function(){};
F.prototype = MED.prototype;

WD.prototype = new F();
WD.prototype.constructor = WD;

F是空對象，因此幾乎不佔內存。這時，修改WD的prototype對象，就不會影響到MED的prototype對象。

console.log(MED.prototype.constructor); // MED

5) 利用 prototype模式的封裝函數

咱們將上面的方法，封裝成一個函數，便於使用。

function extend(Child, Parent) {

    var F = function(){};

    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

使用的時候，方法以下

extend(WD,MED);
var WD1 = new WD("Html","男");
console.log(WD1.aim); // 營銷體驗設計

這個extend函數就是YUI庫如何實現繼承的方法。

6) 拷貝繼承實現

上面是採用prototype方式來實現繼承。其實既然子對象會擁有父對象的屬性和方法，咱們直接採用」拷貝」方法也能夠達到效果。簡單說，若是把父對象的全部屬性和方法，拷貝進子對象，不也可以實現繼承嗎？ 首先，仍是把MED的全部不變屬性，都放到它的prototype對象上。

function MED(){}

MED.prototype.aim = "營銷體驗設計";

而後，再寫一個函數，實現屬性拷貝的目的。

function extendCopy(Child, Parent) {
    var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p) {
        c[i] = p[i];
    }
}

這個函數的做用，就是將父對象的prototype對象中的屬性，一一拷貝給Child對象的prototype對象。使用的時候，這樣寫：

extendCopy(WD, MED);
var WD1 = new WD("Html","男");
console.log(WD1.aim); // 營銷體驗設計

4、」非構造函數」的如何實現繼承

好比，如今有一個對象，叫作」MED」–營銷體驗設計。

var MED = {
    aim:'營銷體驗設計'
}

還有一個對象，叫作」前端開發」。

var WD ={
    skill:'html'
}

請問怎樣才能讓」前端開發」去繼承」營銷體驗設計」，就是說，我怎樣才能生成一個」營銷體驗設計的前端開發」對象？ 這裏要注意，這兩個對象都是普通對象，不是構造函數，沒法使用構造函數方法實現」繼承」。

一、object()方法

Json格式的發明者Douglas Crockford，提出了一個object()函數，能夠作到這一點。

function object(o) {

    function F() {}

    F.prototype = o;

    return new F();
}

這個object()函數，其實只作一件事，就是把子對象的prototype屬性，指向父對象，從而使得子對象與父對象連在一塊兒。 使用的時候，第一步先在父對象的基礎上，生成子對象：

var WD = object(MED);

而後，再加上子對象自己的屬性：

WD.skill = 'html';

這時，子對象已經繼承了父對象的屬性了。

console.log(WD.aim); //營銷體驗設計

二、淺拷貝

除了使用」prototype鏈」之外，還有另外一種思路：把父對象的屬性，所有拷貝給子對象，也能實現繼承。 下面這個函數，就是在作拷貝：

function LightCopy(p) {
    var c = {};
    for (var i in p) {
        c[i] = p[i];
    }
    //c.uber = p;
    return c;
}

使用的時候，這樣寫：

var WD = LightCopy(MED);
WD.aim = '前端開發';

可是，這樣的拷貝有一個問題。那就是，若是父對象的屬性等於數組或另外一個對象，那麼實際上，子對象得到的只是一個內存地址，而不是真正拷貝，所以存在父對象被篡改的可能。請看，如今給MED添加一個」技能」屬性，它的值是一個數組。

MED.skills = ['‘html’','css','Javascript'];

經過LightCopy()函數，WD繼承了MED。

var WD = LightCopy(MED);

而後，咱們爲WD的」技能」添加一個屬性：

WD.skills.push('teamwork');

發生了什麼事？MED的」技能」也被篡改了！

console.log(WD.skills); //‘html’,'Javascript','css','teamwork'
console.log(MED.skills); //‘html’,'Javascript','css','teamwork'

因此，LightCopy()只是拷貝基本類型的數據，咱們把這種拷貝叫作」淺拷貝」。這是早期jQuery實現繼承的方式。

三、深拷貝

所謂」深拷貝」，就是可以實現真正意義上的數組和對象的拷貝。它的實現並不難，只要遞歸調用」淺拷貝」就好了。

function deepCopy(p, c) {
    var c = c || {};
    for (var i in p) {
        if (typeof p[i] === 'object') {
            c[i] = (p[i].constructor === Array) ? [] : {};
            deepCopy(p[i], c[i]);
        } else {
            c[i] = p[i];
        }
    }
    return c;
}

使用的時候這樣寫：

var WD = deepCopy(MED);

如今，給父對象加一個屬性，值爲數組。而後，在子對象上修改這個屬性：

MED.skills = ['‘html’','css','Javascript'];
WD.skills.push('teamwork');

這時，父對象就不會受到影響了。

console.log(WD.skills); //‘html’,'css','Javascript','teamwork'
console.log(MED.skills); //‘html’,'css','Javascript'

目前，jQuery庫使用的就是這種繼承方法。

原文：重溫Javascript繼承機制

 

http://mozilla.com.cn/post/21667/