7种强大的JavaScript继承技术

1. 原型链继承

• 最直接的继承方法之一
• 允许对象通过原型连接的”链”继承属性和方法
• 示例：

  function Animal() {
    this.species = 'Mammal';
    this.habits = ['sleep', 'eat'];
  }
  function Dog() {
    this.breed = 'Bulldog';
  }
  Dog.prototype = new Animal();
  
  let d1 = new Dog();
  let d2 = new Dog();
  d1.habits.push('bark'); // 向Animal.habits添加了bark

• 优点：设置简单，为子类提供所有父原型方法的访问权限
• 缺点：共享引用类型可能会导致副作用，为每个实例调用父对象的构造函数

2. 构造函数继承

• 子对象通过在子构造函数中调用父对象的构造函数来继承属性
• 示例：

  function Animal(species) {
    this.species = species;
    this.activities = [];
  }
  function Dog(breed) {
    Animal.call(this, 'Mammal'); // 给Dog中的父species赋值
    this.breed = breed;
  }
  let d = new Dog('dog')

• 优点：每个实例都有不同的属性，参数可以传递给父级
• 缺点：无法跨实例重用方法，从而导致冗余

3. 复合继承

• 合并了原型链和构造函数继承，以便子类提供唯一属性和对父方法的访问
• 示例：

  function Animal(species) {
    this.species = species;
    this.activities = [];
  }
  Animal.prototype.getSpecies = function() { // 父方法
    return this.species;
  };
  function Dog(breed) {
    Animal.call(this, 'Mammal');
    this.breed = breed;
  }
  Dog.prototype = new Animal();
  Dog.prototype.constructor = Dog;

• 优点：子类有自己的属性和原型方法
• 缺点：父构造函数被调用两次，增加了开销

4. 寄生继承

• 创建、修改和返回对象，使继承变得灵活，但增加了复杂性
• 示例：

  function Animal() {
    this.species = 'Mammal';
    this.habits = ['eat', 'sleep'];
  }
  function Dog() {
    Animal.call(this);
    this.breed = 'Bulldog';
  }
  Dog.prototype = Object.create(Animal.prototype);
  Dog.prototype.constructor = Dog;

• 优点：允许在克隆对象上使用原型扩展
• 缺点：不太适合大型继承结构

5. 原型继承

• Object.create()直接创建具有指定原型的对象
• 示例：

  let animal = {
    species: 'Mammal',
    traits: ['warm-blooded', 'vertebrate']
  };
  function createClone(obj) {
    let clone = Object.create(obj);
    clone.getTraits = function() {
      return this.traits;
    };
    return clone;
  }
  let dog = createClone(animal);

• 优点：简单且不需要构造函数
• 缺点：所有实例共享 prototype 属性

6. 寄生组合继承

• 改进的复合继承，使用Object.create()
• 示例：

  function Animal(species) {
    this.species = species;
    this.traits = [];
  }
  function Dog(breed) {
    Animal.call(this, 'Mammal');
    this.breed = breed;
  }
  Dog.prototype = Object.create(Animal.prototype);
  Dog.prototype.constructor = Dog;

• 优点：解决 double 构造函数调用问题;保留综合效益
• 缺点：代码复杂性和需要额外的封装

7. ES6类继承

• es6 中，在js中引入class语法
• 示例：

  class Animal {
    constructor(species) {
      this.species = species;
    }
    getSpecies() {
      return this.species;
    }
  }
  
  class Dog extends Animal {
    constructor(breed) {
      super('Mammal');
      this.breed = breed;
    }
  }

• 优点：干净、可读的语法，类似于传统的 OOP
• 缺点：可能需要转译,与基于原型的方法相比，性能略有不同