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!