JavaScript继承

关于JavaScript的继承

1.原型链继承

    //子类的原型指向父类的实例
    function SuperType(){
      this.colors = ["red", "blue", "green"];
    }
    function SubType(){}

    SubType.prototype = new SuperType();

缺点：多个实例对引用类型的操作会被篡改

2.构造函数继承

    //复制父类实例给子类
    function  SuperType(){
        this.color=["red","green","blue"];
    }
    function  SubType(){
        //继承自SuperType
        SuperType.call(this);
    }

缺点：不能继承原型属性/方法 无法实现复用，每个子类都有父类实例函数的副本，影响性能

3.组合继承

    function SuperType(name){
      this.name = name;
      this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function(){
      alert(this.name);
    };

    function SubType(name, age){
      // 继承属性
      SuperType.call(this, name);
      this.age = age;
    }

    // 继承方法、构建原型链
    // 第一次调用SuperType()
    SubType.prototype = new SuperType(); 
    // 重写SubType.prototype的constructor属性，指向自己的构造函数SubType
    SubType.prototype.constructor = SubType; 

4.原型式继承

    var person = {
      name: "Nicholas",
      friends: ["Shelby", "Court", "Van"]
    };

    var anotherPerson = Object.create(person,{
        name: {
            value:'aaaa'
        }
    });

缺点：原型链继承多个实例的引用类型属性指向相同，存在篡改的可能，无法传递参数。

5.寄生继承

    function createAnother(original){
      var clone = object(original); // 通过调用 object() 函数创建一个新对象
      clone.sayHi = function(){  // 以某种方式来增强对象
        alert("hi");
      };
      return clone; // 返回这个对象
    }

    //复制代码函数的主要作用是为构造函数新增属性和方法，以增强函数
    var person = {
      name: "Nicholas",
      friends: ["Shelby", "Court", "Van"]
    };
    var anotherPerson = createAnother(person);

    anotherPerson.sayHi(); //"hi"

6.寄生组合式继承

    function inheritPrototype(subType, superType){
      var prototype = Object.create(superType.prototype); // 创建对象，创建父类原型的一个副本
      prototype.constructor = subType;                    //增强对象，弥补因重写原型而失去的默认的constructor 属性
      subType.prototype = prototype;                      // 指定对象，将新创建的对象赋值给子类的原型
    }

    // 父类初始化实例属性和原型属性
    function SuperType(name){
      this.name = name;
      this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function(){
      alert(this.name);
    };

    // 借用构造函数传递增强子类实例属性（支持传参和避免篡改）
    function SubType(name, age){
      SuperType.call(this, name);
      this.age = age;
    }

    // 将父类原型指向子类
    inheritPrototype(SubType, SuperType);

7.ES6的继承

    class Rectangle {
    // constructor
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    // Getter
    get area() {
        return this.calcArea()
    }

    // Method
    calcArea() {
        return this.height * this.width;
    }
}

const rectangle = new Rectangle(10, 20);
console.log(rectangle.area);
// 输出 200

-----------------------------------------------------------------
// 继承
class Square extends Rectangle {

  constructor(length) {
    super(length, length);

    // 如果子类中存在构造函数，则需要在使用“this”之前首先调用 super()。
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }
}

const square = new Square(10);
console.log(square.area);