Javascript繼續

學過後端言語的同硯對繼續並不生疏，然則對JS繼續少量照樣有些疑心，不要試圖問我是假如曉得的，實在javascript繼續主如果基於原型prototype完成的。

實在當你真正了解了原型鏈時刻，再看js繼續，實在比OOP言語更天真、更簡樸一些。接下來我們來看看原型鏈繼續吧：

    //父類
    function Animal(){}
    //子類
    function Dog(){}
    //繼續
    Dog.prototype = new Animal();

實在，就是把子類的prototype指向父類的實例，繼續就完成了，很簡樸吧。這就是原型鏈繼續
上面只是一個簡樸的繼續效果，並沒有實際意義，繼續的目標就是要同享父類的屬性和要領，接下來我們一步一步來揭開這神奇的面紗

    /**
     *
     * 父類，帶屬性
     * @constructor
     * @param name 名字
     * @param type  動物分類
     * @constructor
     */
    function Animal(name,type) {
      this.name = name || 'your name';
      this.type= type || 0;
      this.coatColor= ['white','block','yellow','brown']; //援用範例
      //函數也是援用範例
      this.speak = function () {
          console.log(this.name+' speaking .');
      }
}
    }
    
    /**
     * 為父類新增一個要領
     * @returns {boolean}
     */
    Animal.prototype.say= function () {
         console.log('my name  is '+this.name);
    };
    
    /**
     * 子類
     * @constructor
     */
    function Dog(name) {
         this.name = name;
         this.foot= 4;
    }
    
    //完成繼續-原型鏈繼續 => (子類 -> 子類原型->父類) ;繼續 注重,繼續必需要寫在子類要領定義的前面
    Dog.prototype = new Animal();
    
    /**
     * 子類要領
     *  為子類新增一個要領(在繼續以後,不然會被掩蓋/非常)  dog.run is not a function
     */
    Dog.prototype.run = function () {
        console.log('The '+ this.name +' was runing.');
    };
    var dog = new Dog('taiSen');
    console.log(dog.name); //dog    --子類掩蓋父類的屬性
    console.log(dog.type); // 0     --父類的屬性
    console.log(dog.foot); //4      --子類本身的屬性
    dog.say(); //my name  is taiSen    --繼續自父類的要領
    dog.run(); //The taiSen was runing. --子類本身的要領

以上,看起來我們彷佛已完成了一個完全的繼續了。然則，原型鏈繼續有一個瑕玷，就是屬性假如是援用範例的話，會同享援用範例 ，接下來我個Animal增添援用範例屬性this.coatColor,測試下

    //測試下
    var dog1= new Dog();
    var dog2 = new Dog();
    dog1.coatColor.push('blue');
    console.log(dog1.coatColor); // [ 'white', 'block', 'yellow', 'brown', 'blue' ]
    console.log(dog2.coatColor); // [ 'white', 'block', 'yellow', 'brown', 'blue' ]

dog1,dog2 輸出的coatColor一樣，申明援用範例屬性會被
一切實例同享— 這就是原型鏈繼續的瑕玷,那末我們假如處理這個題目呢？ 接下來我們就要借用————
組織函數繼續

    //子類
    function Cat() {
        Animal.call(this)  // 組織函數繼續(繼續屬性)
    }
    
    //測試下
    var cat1= new Cat();
    var cat2 = new Cat();
    cat1.coatColor.push('red');
    console.log(cat1.coatColor); // [ 'white', 'block', 'yellow', 'brown', 'red' ]
    console.log(cat2.coatColor); // [ 'white', 'block', 'yellow', 'brown']

從效果看，我們就處理了援用範例被一切實例同享的題目了。

注重：這裏跟
原型鏈繼續有個比較顯著的區別是並沒有運用
prototype繼續,而是在子類內里實行父類的組織函數, 相當於把父類的代碼複製到子類內里實行一遍,如許做的另一個優點就是能夠給父類傳參。

測試代碼：

    /比方:
    function Pig(name) {
        Animal.call(this,name);
    }
    var pig1= new Animal('big Pig');
    var pig2 = new Animal('small Pig');
    console.log(pig1.name); // big Pig
    console.log(pig2.name); //small Pig

看起來是否是很像java,C#言語啊,以上組織函數處理了援用範例被一切實例同享的題目。

注重： 正因為組織函數處理了處理了援用範例被一切實例同享的題目,致使了一個相對很抵牾的題目湧現了,——————
函數也是
援用範例,函數也沒方法同享了.也就是說,每一個實例內里的函數,雖然功用一樣,然則卻不是同一個函數,就相當於我們每實例化一個子類,就複製了一遍的函數代碼。

//父類新增this.speak函數
function Animal(name,type) {
  this.name = name || 'your name';
  this.type= type || 0;
  this.coatColor= ['white','block','yellow','brown']; //援用範例
    //函數也是援用範例
  this.speak = function () {
      console.log(this.name+' speaking .');
  }
}

//測試
console.log(pig1.speak===pig2.speak); // false 

以上證實,父類的函數,在子類的實例下是不同享的。

怎麼辦呢？，以上能夠看出原型鏈繼續 和 組織函數繼續 這兩種繼續體式格局的優瑕玷剛好是互相抵牾的,那末我們有無方法魚和熊掌兼得呢? 答案是一定的————組合繼續

    // 父類
    function Animal() {
        this.name = name || 'your name';
        this.type= type || 0;
        this.coatColor= ['white','block','yellow','brown']; //援用範例
    }
    
    // 父類函數
    Animal.prototype.speak =function () {
          console.log(this.name+' speaking .');
      }
    
    // 子類
    function Chicken(){
        Animal.call(this)             // 組織函數繼續(繼續屬性)
    }
    // 繼續
    Chicken.prototype = new Animal()  // 原型鏈繼續(繼續要領)

總結

本文中的代碼見demo coding ，假如以為對您有效，幫加個star,萬分謝謝！

本日就寫到這，報告了3種繼續體式格局，實在J繼續另有許多繼續體式格局。其他留在下期再會咯。
覺得列位的收看，迎接發問。