Javascript模擬繼承（贈送.net吐槽一段）

首先吐槽一句，今年的就業形勢很不樂觀啊，特別是搞.net的（相對java），特特別是還沒出校門沒有正式工做經驗的，找個實習很難，前些天接了個面試電話，上來就質疑我「你一個在校大學生怎麼可能作了那麼多項目呢，你的簡歷是真實的嗎？這些項目你作的是核心工做嗎？」，語氣中充滿了質疑，我只能生硬的回答着「嗯啊」，這個時候去解釋或許太蒼白了，我深知年輕人很難受到別人信任。固然了冷靜下來想一想，如今這個社會留給年輕人的機會原本就很少，就算你在大學裏學了很多東西，作了很多東西，相對於前輩來說仍是有大差距的，經歷點挫折是應該的嘛，不怨天不尤人，繼續堅持下去吧。

蛋疼的日子總要作點事的，最近想把本身寫的一些js經常使用功能封裝成本身的一個庫，因而乎學習了一下jquery框架的總體架構，收穫頗多，接着又看了看百度編輯器的核心js庫，發現其中一段javascript模擬繼承的代碼，用的地方還挺多，閒得無聊分析一下吧。

引發我注意的來自百度編輯器js庫中的一段註釋

  /**
     * 模擬繼承機制，subClass繼承superClass
     * @name inherits
     * @grammar UE.utils.inherits(subClass,superClass) => subClass
     * @example
     * function SuperClass(){
     *     this.name = "小李";
     * }
     * SuperClass.prototype = {
     *     hello:function(str){
     *         console.log(this.name + str);
     *     }
     * }
     * function SubClass(){
     *     this.name = "小張";
     * }
     * UE.utils.inherits(SubClass,SuperClass);
     * var sub = new SubClass();
     * sub.hello("早上好!"); ==> "小張早上好！"
     */

要說大廠就是大廠，註釋寫的很是規範，可讓新人很快參與到項目中來。（順便吐槽一句，.net開發者想進百度很難啊，內部有些辦公系統也不招聘實習生，想進電商實現也很難啊，由於基本上沒有.net平臺了...）。

建議先看一下prototype的用法（參考http://blog.sina.com.cn/s/blog_7045cb9e0100rtoh.html）

首先咱們來看一個列子

//定義一個父類
 function SuperClass() {
            this.name = "小李";
            this.age = "15";           
        }
        //父類經過prototype給本身增長了一個hello方法
        SuperClass.prototype = {
            hello: function (str) {
                console.log("hello:"+this.name + str);
            }

        }
        //父類經過prototype給本身增長了一個sex屬性
        SuperClass.prototype.sex = "男";
       //父類經過prototype給本身增長了一個指向一個對象（數組對象）的屬性arr，這裏強調一下，這裏指向的是一個對象，待會測試有用。
        SuperClass.prototype.arr = new Array("a", "b");
      //定義一個子類
        function SubClass() {
            this.name = "小張";
            this.address = "北京";

        }
       //將父類的方法屬性克隆過來       
        SubClass.prototype = new SuperClass();   
       //建立一個子類對象     
        var son = new SubClass();
       //這樣咱們的son遍具備了hello方法       
        son.hello("你好");
       //咱們生成另外一個子類實例,改變name和arr
        var son2 = new SubClass();
        son2.name="小紅";
        son2.arr.push("cc");
        console.log(son.name);//值未變
        console.log(son.arr);//輸出a,b,cc也就是說父類中的屬性若是指向的是對象，則子類的實例將會共享這個對象。
        
     

上面的列子中 SubClass.prototype = new SuperClass();   這句起到了關鍵的做用，它把父類的方法屬性克隆給了子類。可是會帶來一個問題，那就是假如子類的定義中使用了js框架中流行的構造函數/原型方式，以下：

   function SubClass() {
            this.name = "小張";
            this.address = "北京";
        }
  SubClass.prototype.add = function () {
            console.log("add:"+this.name);
        }

這就是傳說中的聯合建立類的方法，就是用構造函數/原型方式就能夠像其餘程序設計語言同樣建立對象，用構造函數定義對象的非函數屬性，用原型方式定義對象的方法。 不少js框架中都在用這種方法，這種方法效率較高，節約內存。

然而當在子類定義以後寫上 SubClass.prototype = new SuperClass();之後,會覆蓋掉本身定義的add方法，這樣子類的這句定義

 SubClass.prototype.add = function () {

            console.log("add:"+this.name);

}

就必須寫到SubClass.prototype = new SuperClass(); 以後了。這樣顯然給咱們使用帶來了麻煩，每次定義子類這種用法的時候還得考慮一個順序問題，實在不方便。咱們看看百度編輯器的js核心庫是怎麼解決的

爲了分析方便，我把它的js模擬繼承的代碼抽離出來，原來一些以json方式組織的函數單獨放到一個新的html頁面裏作測試。如下是我抽離出來的和模擬繼承有關的代碼：

 //定義一個父類
        function SuperClass() {
            this.name = "小李";
            this.showMsg = function () {
                alert("baseClass::showMsg");
            }
          
        }      
      
        SuperClass.prototype = {
            hello: function (str) {
                console.log(this.name + str);
            }
           
        }
        SuperClass.prototype.sex = "男";
        SuperClass.prototype.arr = new Array("a", "b"); 
        //定義子類
        function SubClass() {
            this.name = "小張";

        }
        //子類經過聯合建立方式增長了add方法
        SubClass.prototype.ddd = function () { console.log(this.name); }   
        //能夠在定義完成以後，在須要繼承的時候寫上一下語句來開始繼承操做 
        inherits(SubClass, SuperClass);
        //生成一個子類實例
        var sub = new SubClass();
        sub.hello("早上好!");//父類的hello可使用
        sub.ddd(); //子類的ddd方法可使用了     
        sub.arr.push("cc");
        var sub1 = new SubClass();      
        console.log(sub1.arr);//sub1和sub共享了arr，需注意。

相應的extend，inherits和makeInstance方法

        //將原型s中的屬性複製給一個對象t
        function extend(t, s, b) {
            if (s) {
//                console.log(s);
                for (var k in s) {                   
       //下面用到了hasOwnProperty,用來判斷一個對象是否有你給出的屬性或對象
                    if (!b || !t.hasOwnProperty(k)) {                      
                        t[k] = s[k];
                    }
                }
            }
            return t;
        }
        function inherits(subClass, superClass) {              
            var oldP = subClass.prototype,
            newP = makeInstance(superClass.prototype); //返回父類由原型方法生成實例對象，這裏並無返回整個父類對象實例，而是根據父類原型生成了一個對象，這樣父類構造函數中的成員屏蔽掉了，子類沒法繼承。
            console.log(newP);       
            extend(newP, oldP, true);  //經過這一步，子類在原型中定義的屬性賦給了父類原型生成的對象       
            subClass.prototype = newP;//經過這一步，子類原型被從新構造，包括了本身原來的屬性和父類原型中的屬性。      
            return (newP.constructor = subClass);
        }
        function makeInstance(obj) {
            var noop = new Function();
            noop.prototype = obj;
            obj = new noop;
            noop.prototype = null;
            return obj;
        }
       

這裏要說一句，這篇文章介紹的模擬繼承方法只能將父類原型中的屬性，好比上面的hello方法能夠繼承給子類，或者父類原型再添加一個性別屬性好比SuperClass.prototype.sex = "男";這裏的sex一樣能夠傳遞給子類，可是父類構造函數中的成員沒法繼承給子類，子類必須從新定義。也就是說父類構造函數中定義的屬性能夠認爲是「private」的，父類原型中定義的是」public「的，因此若是父類的屬性想讓子類繼承，最好定義到原型中。這時特別要注意若是父類原型中的成員指向一個對象時，好比 SuperClass.prototype.arr = new Array("a", "b"); 全部子類的實例將會共享這個arr屬性。

總結它的這個邏輯也就一句話，把子類原型中的成員給了父親原型的一個實例對象，這個實例對象獲得了擴充，而後清空子類原型，最後把這個擴充的對象中的成員克隆給子類原型。

   好了，扯淡了半天把本身都扯暈了，我是有多無聊啊。趕忙來個單位把我這妖孽收了吧。