JavaScript面向對象繼承機制

原型概念

• 每個JavaScript對象（null除外）都和另外一個對象相關聯，‘另外一個’對象就是原型，每個對象都從原型繼承屬性。
• 全部經過對象直接量建立的對象都具備同一個原型對象，並能夠經過JavaScript代碼Object.prototype得到原型對象的引用。經過關鍵字new和構造函數調用建立的對象的原型就是構造函數的prototype屬性的值。
• 在JavaScript中，類的全部實例對象都從同一個原型對象上繼承屬性。

繼承方式

原型繼承

• 讓自身的原型指向父類的實例
• 代碼

/**
    * Description: 建立父類
    */
   function parentA() {
       this.say = function () {
           alert('Hello World!');
       }
   }

   /**
    * Description: 建立子類
    */
   function subB() {

   }

   // 原型繼承
   subB.prototype = new parentA();

   // 建立subB的實例
   var b = new subB();

   b.say(); // 彈出Hello World!

原型冒充繼承

• 在運行自身的構造時，先運行父類的構造函數
• 代碼

/**
     * Description: 建立父類
     */
    function parentA(job) {
        this.job  = job;
        this.say  = function () {
            alert('Hello World!');
        }
    }

    /**
     * Description: 建立子類
     * 在運行自身的構造函數時使用apply方法先運行父類的構造函數
     */
    function subB(name) {
        this.parent = parentA;              // 把parentA賦值給subB的parent屬性
        this.parent.apply(this, arguments); // 用this調用parentA的構造函數

        delete this.parent;                 // 調用完成以後，刪除parent這個屬性
        
        this.name = name
    }

    // 建立subB的實例
    var b = new subB();

    b.say(); // 彈出Hello World!

複製繼承

• 把父類的屬性copy到自身
• 代碼

/**
     * Description: 建立父類
     */
    function parentA(job) {
        this.job  = job;
        this.say  = function () {
            alert('Hello World!');
        }
    }

    /**
     * Description: 建立子類
     * 把父類的屬性copy到自身
     */
    function subB(name) {
        this.name = name;

        this.extend = function (parent) {
            for(var key in parent) {
                this[key] = parent[key];
            }
        }
    }

    // 建立subB的實例
    var b = new subB();

    b.say(); // 報錯 b.say is not a function

    // 複製父類的屬性到自身
    b.extend(new parentA());

    b.say(); // 彈出 Hello World!