Javascript繼承機制分析+simple-inheritance原始碼分析

老生常談的問題，大部分人也不一定可以系統的理解。Javascript語言對繼承實現的並不好，需要工程師自己去實現一套完整的繼承機制。下面我們由淺入深的系統掌握使用javascript繼承的技巧。

1. 直接使用原型鏈

這是最簡粗暴的一種方式，基本沒法用於具體的專案中。一個簡單的demo如下：

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}
function SubType(){
    this.subproperty = false;
}
//繼承
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
    return this.subproperty;
}
var instance = new SubType();

這種方式的問題是原型中的屬性會被所用例項共享，通過一個例項改變一個繼承過來的屬性時，會影響到其他例項。,這顯然不是一種常規意義上的繼承。

2.使用建構函式

建構函式本質上也只是一個函式而已，可以在任何作用域中呼叫，在子建構函式中呼叫父建構函式，就可以實現簡單的繼承。

function SuperType(){
    this.colors = {"red","blue","green"}
}
function SubType(){
    SuperType.call(this);   
}
var instance = new SubType();

這種實現避免了多個例項共享屬性的問題，但是又出現了新的問題，比如沒法共享函式，而且 instance instanceof SuperType 為false。

3. 組合使用原型和建構函式

function SuperType(name){
    this.name = name;
    this.colors = {"red","blue","green"}
}
SuperType.prototype.sayName = function(){
    //code
}
function SubType(name,age){
    SuperType.call(this,name);  
    this.age = age;
}
SubType.prototype = new SuperType();
var instance = new SubType();

組合使用原型和建構函式是javascript中最常用的繼承模式。使用這種方式，每個例項都有自己的屬性，同時可以共享原型中的方法。但是這種方式的缺點是：無論什麼情況，都會呼叫兩次超類建構函式。一次是在建立子類原型時，另一次是在子類建構函式內部。這種問題該怎麼解決呢？

4. 寄生組合式繼承

SubType的原型並不一定非要是SuperType的例項,只需是一個建構函式的原型是SuperType的原型的普通物件就可以了。Douglas Crockford的方法如下：

function obejct(o){
    function F(){};
    F.prototype = o;
    return new F();
}

其實這也就是ES5中Object.create的實現。那麼我們可以修改本文中的第3種方案：

function inheritPrototype(subType,superType){
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
function SuperType(name){
    this.name = name;
    this.colors = {"red","blue","green"}
}
SuperType.prototype.sayName = function(){
    //code
}
function SubType(name,age){
    SuperType.call(this,name);  
    this.age = age;
}
inheritPrototype(SubType,SuperType);
var instance = new SubTYpe();

其實寄生組合式繼承已經是一種非常好的繼承實現機制了，足以應付日常使用。如果我們提出更高的要求：比如如何在子類中呼叫父類的方法呢？

5.simple-inheritance庫的實現

看這麼難懂的程式碼，起初我是拒絕的，但是深入之後才發現大牛就是大牛，精妙思想無處不在。我對每一行程式碼都有詳細的註釋。如果你想了解細節，請務必詳細研究，讀懂每一行。我覺得這個實現最精妙的地方就是按需重寫父類方法，在例項物件中可以通過_super呼叫父類的同名方法，類似於java的實現。

(function(){
    //initializing用於控制類的初始化，非常巧妙，請留意下文中使用技巧
    //fnTest返回一個正則比表示式，用於檢測函式中是否含有_super，這樣就可以按需重寫，提高效率。當然瀏覽器如果不支援的話就返回一個通用正規表示式
    var initializing = false,fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
    //所有類的基類Class,這裡的this一般是window物件
    this.Class = function(){};
    //對基類新增extend方法，用於從基類繼承
    Class.extend = function(prop){
        //儲存當前類的原型
        var _super = this.prototype;
        //建立當前類的物件，用於賦值給子類的prototype，這裡非常巧妙的使用父類例項作為子類的原型，而且避免了父類的初始化(通過閉包作用域的initializing控制)
        initializing = true;
        var prototype = new this();     
        initializing = false;
        //將引數prop中賦值到prototype中，這裡的prop中一般是包括init函式和其他函式的物件
        for(var name in prop){
            //對應重名函式，需要特殊處理，處理後可以在子函式中使用this._super()呼叫父類同名建構函式, 這裡的fnTest很巧妙:只有子類中含有_super字樣時才處理從寫以提高效率
            prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name])?
             (function(name,fn){
                return function(){
                    //_super在這裡是我們的關鍵字，需要暫時儲存一下
                    var tmp = this._super;  
                    //這裡就可以通過this._super呼叫父類的建構函式了              
                    this._super = _super[name];
                    //呼叫子類函式  
                    fn.apply(this,arguments);
                    //復原_super，如果tmp為空就不需要復原了
                    tmp && (this._super = tmp);
                }
             })(name,prop[name]) : prop[name];
        }
        //當new一個物件時，實際上是呼叫該類原型上的init方法,注意通過new呼叫時傳遞的引數必須和init函式的引數一一對應
        function Class(){
            if(!initializing && this.init){
                this.init.apply(this,arguments);    
            }
        }       
        //給子類設定原型
        Class.prototype = prototype;
        //給子類設定建構函式
        Class.prototype.constructor = Class;
        //設定子類的extend方法，使得子類也可以通過extend方法被繼承
        Class.extend = arguments.callee;
        return Class;
    }
})();

通過使用simple-inheritance庫，我們就可以通過很簡單的方式實現繼承了，是不是發現特別像強型別語言的繼承。

var Human = Class.extend({
  init: function(age,name){
    this.age = age;
    this.name = name;
  },
  say: function(){
    console.log("I am a human");
  }
});
var Man = Human.extend({
    init: function(age,name,height){
        this._super(age,name);
        this.height = height;
    },  
    say: function(){
        this._super();
        console.log("I am a man");  
    }
});
var man = new Man(21,'bob','191');
man.say();

本文同時發表在我的部落格積木村の研究所 ：http://foio.github.io/javascript-inheritance/