JS高级ES6的6种继承方式

下面是JS高级ES6的6种继承方式的详细攻略。

1. 经典继承（原型链继承）

原理：

子类的原型为父类的一个实例，通过设置子类的原型链，使子类可以访问父类的属性和方法，也就实现了继承。

示例：

// 父类
function Animal(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  }
}

// 子类
function Dog(name) {
  this.bark = function() {
    console.log('Woof!');
  }
  Animal.call(this, name);
}

Dog.prototype = new Animal();

// 实例化子类
const puppy = new Dog('Puppy');

puppy.sayName(); // 输出：Puppy
puppy.bark(); // 输出：Woof!

2. 构造函数继承

原理：

通过在子类构造函数中调用父类构造函数，以达到继承父类属性和方法的目的。

示例：

// 父类
function Animal(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  }
}

// 子类
function Dog(name) {
  Animal.call(this, name);
  this.bark = function() {
    console.log('Woof!');
  }
}

// 实例化子类
const puppy = new Dog('Puppy');

puppy.sayName(); // 输出：Puppy
puppy.bark(); // 输出：Woof!

3. 组合继承（原型链继承和构造函数继承结合）

原理：

先使用原型链继承父类的属性和方法，再通过构造函数继承父类的属性和方法，从而既继承了父类的属性和方法，又避免了子类实例修改父类属性或方法造成的影响。

示例：

// 父类
function Animal(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  }
}

// 子类
function Dog(name) {
  Animal.call(this, name);
  this.bark = function() {
    console.log('Woof!');
  }
}

Dog.prototype = new Animal();

// 实例化子类
const puppy = new Dog('Puppy');

puppy.sayName(); // 输出：Puppy
puppy.bark(); // 输出：Woof!

4. 原型式继承

原理：

以一个对象为原型创建一个子对象，通过使用Object.create实现原型式继承。

示例：

// 父对象
const Animal = {
  name: '',
  sayName() {
    console.log(this.name);
  }
}

// 子对象
const Dog = Object.create(Animal);
Dog.bark = function() {
  console.log('Woof!');
}

// 实例化子对象
const puppy = Object.create(Dog);
puppy.name = 'Puppy';

puppy.sayName(); // 输出：Puppy
puppy.bark(); // 输出：Woof!

5. 寄生式继承

原理：

与原型式继承类似，不同在于寄生式继承在创建的新对象上增加新的方法，而不是在原型上增加。

示例：

// 父对象
const Animal = {
  name: '',
  sayName() {
    console.log(this.name);
  }
}

// 子对象
function Dog(name) {
  const dog = Object.create(Animal);
  dog.bark = function() {
    console.log('Woof!');
  }
  dog.name = name;
  return dog;
}

// 实例化子对象
const puppy = Dog('Puppy');

puppy.sayName(); // 输出：Puppy
puppy.bark(); // 输出：Woof!

6. 寄生组合式继承（ES6改进版组合继承）

原理：

以函数封装组合继承，通过ES6中的class和extends语法糖实现，从而避免了构造函数多次调用父类的问题。

示例：

// 父类
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}

// 子类
class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  bark() {
    console.log('Woof!');
  }
}

// 实例化子类
const puppy = new Dog('Puppy');

puppy.sayName(); // 输出：Puppy
puppy.bark(); // 输出：Woof!

以上就是JS高级ES6的6种继承方式的完整攻略，希望能够对您有所帮助。