JavaScript继承

什么是原型：

每个函数都有一个原型属性，这个属性是一个指针，指向一个对象，这个对象的用途可以实例共享的属性和方法

 

原型继承：

//原型继承
    //缺点：原型对象的引用属性屎所有实例共享的，修改引用类型的值，所有实例都会改变。
    //不能向超类的构造函数传递参数
    (function () {
      function SuperType() {
        this.boolSuper = true;
        this.colors = ['red','green'];
      }

      SuperType.prototype.getSuperValue = function () {
        return this.boolSuper;
      }

      function SubType() {
        this.boolSub = false;
      }

      SubType.prototype = new SuperType();

      SubType.prototype.getSubVlaue = function () {
        return this.boolSub;
      }

      var instance = new SubType();
      instance.colors.push('black');
    
      var instance2 = new SubType();

      console.log(instance.colors);
      console.log(instance2.colors);

    })();

借用构造函数：

//借用构造函数
    //缺点：只能继承构造函数的属性和方法，不能继承原型属性方法。
    //方法都在构造函数中定义，函数无法复用。
    (function () {
      function SuperType(name) {
        this.name = name;
        this.boolSuper = true;
        this.colors = ['red','green'];
        this.getName = function () {
          return this.name;
        }
      }

      SuperType.prototype.getSuperValue = function () {
        return this.boolSuper;
      }

      function SubType(name) {
        // call/apply 作用是改变this指向; 两者不同在于接受方式
        // call参数：第一个是函数运行的作用域，传递的参数必须列举出来。
        // apply参数：第一个是函数运行的作用，第二个是参数数组(arguments)。
        this.boolSub = false;
        SuperType.call(this,name);
        // SuperType.apply(this,arguments);
      }

      SubType.prototype.getSubVlaue = function () {
        return this.boolSub;
      }

      var instance = new SubType('zhangsan');
      instance.colors.push('black');
    
      var instance2 = new SubType('lisi');

      console.log(instance.colors);
      console.log(instance2.colors);
      console.log(instance.getName());
      console.log(instance2.getName());
    })();

组合继承：

//组合继承
    //缺点：调用两次父构造函数
    (function () {
      function SuperType(name) {
        this.name = name;
        this.boolSuper = true;
        this.colors = ['red','green'];
      }

      SuperType.prototype.getSuperValue = function () {
        return this.boolSuper;
      }

      SuperType.prototype.getSuperName = function () {
        return this.name;
      }

      function SubType(name) {
        // call/apply 作用是改变this指向; 两者不同在于接受方式
        // call参数：第一个是函数运行的作用域，传递的参数必须列举出来。
        // apply参数：第一个是函数运行的作用，第二个是参数数组(arguments)。
        this.boolSub = false;
        SuperType.call(this,name);
        // SuperType.apply(this,arguments);
      }

      SubType.prototype = new SuperType();

      SubType.prototype.getSubVlaue = function () {
        return this.boolSub;
      }

      var instance = new SubType('zhangsan');
      instance.colors.push('black');
    
      var instance2 = new SubType('lisi');

      console.log(instance.colors);
      console.log(instance2.colors);
      console.log(instance.getSuperName());
      console.log(instance2.getSuperName());
    })();

寄生组合继承：

//寄生组合继承
    (function () {
      function inheritPrototype(SubType,SuperType) {
        var prototype = Object.create(SuperType.prototype);
        SubType.prototype = prototype;
      }

      function SuperType(name) {
        this.name = name;
        this.boolSuper = true;
        this.colors = ['red','green'];
      }

      SuperType.prototype.getSuperValue = function () {
        return this.boolSuper;
      }

      SuperType.prototype.getSuperName = function () {
        return this.name;
      }

      function SubType(name) {
        // call/apply 作用是改变this指向; 两者不同在于接受方式
        // call参数：第一个是函数运行的作用域，传递的参数必须列举出来。
        // apply参数：第一个是函数运行的作用，第二个是参数数组(arguments)。
        this.boolSub = false;
        SuperType.call(this,name);
        // SuperType.apply(this,arguments);
      }

      inheritPrototype(SubType,SuperType);

      SubType.prototype.getSubVlaue = function () {
        return this.boolSub;
      }

      var instance = new SubType('zhangsan');
      instance.colors.push('black');
    
      var instance2 = new SubType('lisi');

      console.log(instance.colors);
      console.log(instance2.colors);
      console.log(instance.getSuperName());
      console.log(instance2.getSuperName());
    })();