JavaScript常见继承模式实例小结

下面是JavaScript常见继承模式实例小结的完整攻略。

常见继承模式实例小结

在JavaScript中实现继承有多种方法，下面将会介绍常见的几种方法，并通过示例说明。

1. 原型链继承

原型链继承是JavaScript中最常见的继承模式，它的实现方法如下：

function Animal (name) {
  this.name = name
}

Animal.prototype.sayName = function () {
  console.log(this.name)
}

function Dog (name) {
  this.type = 'dog'
}

Dog.prototype = new Animal()

var dog1 = new Dog('小黄')
dog1.sayName() // 小黄

上述代码中创建了一个Animal构造函数，并在Animal的原型中添加了sayName方法。接着创建了一个Dog构造函数，并将Dog的原型指向了Animal的实例。这样，Dog的实例就能够继承Animal的属性和方法。

2. 借用构造函数继承

借用构造函数继承也是一种常见的继承模式，它的实现方法如下：

function Animal (name) {
  this.name = name
}

Animal.prototype.sayName = function () {
  console.log(this.name)
}

function Dog (name) {
  Animal.call(this, name)
  this.type = 'dog'
}

var dog1 = new Dog('小黄')
dog1.sayName() // TypeError: dog1.sayName is not a function

上述代码中创建了一个Animal构造函数，并在Animal的原型中添加了sayName方法。接着创建了一个Dog构造函数，在Dog构造函数中通过call方法将this指向Animal，并且将name作为参数传入。这样，Dog的实例就能够继承Animal的属性，但无法继承Animal的方法。

3. 组合继承

组合继承是上述两种继承模式的结合体，它的实现方法如下：

function Animal (name) {
  this.name = name
}

Animal.prototype.sayName = function () {
  console.log(this.name)
}

function Dog (name) {
  Animal.call(this, name)
  this.type = 'dog'
}

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

var dog1 = new Dog('小黄')
dog1.sayName() // 小黄

上述代码中创建了一个Animal构造函数，并在Animal的原型中添加了sayName方法。接着创建了一个Dog构造函数，在Dog构造函数中通过call方法将this指向Animal，并且将name作为参数传入。然后将Dog的原型指向Animal的实例，并将Dog的原型的constructor属性指向Dog。这样，Dog的实例既能够继承Animal的属性，也能继承Animal的方法。

4. 原型式继承

原型式继承是通过一个对象创建另一个对象，它的实现方法如下：

var animal = {
  name: '动物',
  sayName: function () {
    console.log(this.name)
  }
}

var dog1 = Object.create(animal)
dog1.type = 'dog'

dog1.sayName() // 动物

上述代码中创建了一个animal对象，并在animal对象中添加了name属性和sayName方法。接着通过Object.create方法，将dog1对象的原型指向animal对象，然后在dog1对象中添加了type属性。这样，dog1对象就能够继承animal对象的属性和方法。

5. 寄生式继承

寄生式继承是在原型式继承的基础上添加一些新的属性或方法，它的实现方法如下：

var animal = {
  name: '动物',
  sayName: function () {
    console.log(this.name)
  }
}

function createDog (name) {
  var dog = Object.create(animal)
  dog.type = 'dog'
  dog.sayType = function () {
    console.log(this.type)
  }
  return dog
}

var dog1 = createDog('小黄')
dog1.sayName() // 动物
dog1.sayType() // dog

上述代码中创建了一个animal对象，并在animal对象中添加了name属性和sayName方法。接着创建了一个createDog函数，在createDog函数中通过Object.create方法将dog对象的原型指向animal对象，并在dog对象中添加了type属性和sayType方法。最后返回dog对象，这样，dog对象就能够继承animal对象的属性和方法，并添加新的属性和方法。

6. 寄生组合式继承

寄生组合式继承是在组合继承的基础上，使用Object.create方法来使Animal的实例作为Dog的原型，避免了组合继承中创建两次Animal实例的问题。它的实现方法如下：

function Animal (name) {
  this.name = name
}

Animal.prototype.sayName = function () {
  console.log(this.name)
}

function Dog (name) {
  Animal.call(this, name)
  this.type = 'dog'
}

Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.constructor = Dog

var dog1 = new Dog('小黄')
dog1.sayName() // 小黄

上述代码中创建了一个Animal构造函数，并在Animal的原型中添加了sayName方法。接着创建了一个Dog构造函数，在Dog构造函数中通过call方法将this指向Animal，并且将name作为参数传入。然后将Dog的原型指向Animal的原型通过Object.create方法，避免了组合继承中创建两次Animal实例的问题，最后将Dog的原型的constructor属性指向Dog。这样，Dog的实例既能够继承Animal的属性，也能继承Animal的方法。

这就是JavaScript常见继承模式实例的小结。它们各有优缺点，针对不同的场景，选择不同的继承模式能够更好的解决问题。