JS 实现继承的几种方式 | WQ's personal blog

继承作为面向对象语言的三大特性之一，可以在不影响父类对象实现的情况下，使得子类对象具有父类对象的特性；同时还能再不影响父类对象行为的情况下扩展子类对象独有的特性，为编码带来了极大的便利。
下面我们就来看看 JavaScript 中都有哪些实现继承的方法。

原型链继承

原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。

原型链继承的主要思想是：重写子类的prototype属性，将其指向父类的实例。
下面我们结合代码来了解一下。

function Animal (name) {
  // 属性
  this.name = name
  this.type = 'Animal'
  // 实例函数
  this.sleep = function () {
    console.log(this.name + '正在睡觉');
  }
}
// 原型函数
Animal.prototype.eat = function (food) {
  console.log(`${this.name}正在吃${food}`);
}

// 子类
function Cat (name) {
  this.name = name
}
// 原型继承
Cat.prototype = new Animal()
// 将Cat的构造函数指向自身
Cat.prototype.constructor = Cat

let cat = new Cat('Tom')
console.log(cat.name) // Tom
console.log(cat.type) // Animal
cat.sleep() // Tom正在睡觉
cat.eat('猫罐头') // Tom正在吃猫罐头

在子类Cat中，我们没有增加type属性，因此会直接继承父类Animal的type属性。

在子类Cat中，我们增加了name属性，在生成子类实例时，name属性会覆盖父类Animal属性值。

同样因为Cat的prototype属性指向了Animal类型的实例，因此在生成实例Cat时，会继承实例函数和原型函数。

需要注意：

Cat.prototype.constructor = Cat

如果不将Cat原型对象的constructor属性指向自身的构造函数，那将指向父类Animal的构造函数。

原型链继承的优点

简单，易于实现

只需要设置子类的prototype属性指向父类的实例即可。

可通过子类直接访问父类原型链属性和函数

原型链继承的缺点

子类的所有实例将共享父类的属性

子类的所有实例将共享父类的属性会带来一个很严重的问题，父类包含引用值时，子类的实例改变该引用值会在所有实例中共享。

function Animal () {
  this.skill = ['eat', 'jump', 'sleep']
}
function Cat () {}
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat

let cat1 = new Cat()
let cat2 = new Cat()
cat1.skill.push('walk')
console.log(cat1.skill) // ["eat", "jump", "sleep", "walk"]
console.log(cat2.skill) // ["eat", "jump", "sleep", "walk"]

在子类实例化时，无法向父类的构造函数传参

在通过new操作符创建子类的实例时，会调用子类的构造函数，而在子类的构造函数中并没有设置与父类关联，从而导致无法向父类的构造函数传递参数。

无法实现多继承

子类的prototype只能设置一个值，设置多个值时，后面的值会覆盖前面的值。

构造函数继承（借助 call）

构造函数继承的主要思想：在子类的构造函数中通过call()函数改变thi的指向，调用父类的构造函数，从而将父类的实例的属性和函数绑定到子类的this上。

  // 父类
function Animal (age) {
  // 属性
  this.name = 'Animal'
  this.age = age
  // 实例函数
  this.sleep = function () {
    console.log(this.name + '正在睡觉');
  }
}
// 原型函数
Animal.prototype.eat = function (food) {
  console.log(`${this.name}正在吃${food}`);
}
function Cat (name) {
  // 核心，通过call()函数实现Animal的实例的属性和函数的继承
  Animal.call(this)
  this.name = name
}

let cat = new Cat('Tom')
cat.sleep() // Tom正在睡觉
cat.eat() // Uncaught TypeError: cat.eat is not a function

通过代码可以发现，子类可以正常调用父类的实例函数，而无法调用父类原型上的函数，这是因为子类并没有通过某种方式来调用父类原型对象上的函数。

构造继承的优点

解决了子类实例共享父类属性的问题

call()函数实际时改变父类Animal构造函数中this的指向，然后调用this指向了子类Cat，相当于将父类的属性和函数直接绑定到了子类的this中，成了子类实例的熟属性和函数，因此生成的子类实例中是各自拥有自己的属性和函数，不会相互影响。

创建子类的实例时，可以向父类传参

   // 父类
function Animal (age) {
  this.name = 'Animal'
  this.age = age
}
function Cat (name, parentAge) {
  // 在子类生成实例时，传递参数给call()函数，间接地传递给父类，然后被子类继承
  Animal.call(this, parentAge)
  this.name = name
}

let cat = new Cat('Tom', 10)
console.log(cat.age)

可以实现多继承

在子类的构造函数中，可以多次调用call()函数来继承多个父对象。

构造函数的缺点

实例只是子类的实例，并不是父类的实例

因为我们并未通过原型对象将子类与父类进行串联，所以生成的实例与父类并没有关系。

只能继承父类实例的属性和函数，并不能继承原型对象上的属性和函数

与上面原因相同。

无法复用父类的构造函数

因为父类的实例函数将通过call()函数绑定到子类的this中，因此子类生成的每个实例都会拥有父类实例的引用，这会造成不必要的内存消耗，影响性能。

组合继承

组合继承的主要思想：结合构造继承和原型继承的两种方式，一方面在子类的构造函数中通过call()函数调用父类的构造函数，将父类的实例的属性和函数绑定到子类的this中；另一方面，通过改变子类的prototype属性，继承父类的原型对象上的属性和函数。

// 父类
function Animal (age) {
  // 实例属性
  this.name = 'Animal'
  this.age = age
  this.skill = ['eat', 'jump', 'sleep']
  // 实例函数
  this.sleep = function () {
    console.log(this.name + '正在睡觉')
  }
}
// 原型函数
Animal.prototype.eat = function (food) {
  console.log(`${this.name}正在吃${food}`)
}

// 子类
function Cat (name) {
  // 通过构造函数继承实例的属性和函数
  Animal.call(this)
  this.name = name
}
// 通过原型继承原型对象上的属性和函数
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat

let cat = new Cat('Tom')
console.log(cat.name) // Tom
cat.sleep() // Tom正在睡觉
cat.eat('猫罐头') // Tom正在吃猫罐头

组合继承的优点

既能继承父类实例的属性和函数，又能继承原型对象上的属性和函数

既是子类的实例，又是父类的实例

不存在引用属性共享的问题

构造函数作用域优先级比原型链优先级高，所以不会出现引用属性共享的问题。

可以向父类的构造函数中传参

组合继承的缺点

父类的实例属性会被绑定两次

在子类的构造函数中，通过call()函数调用了一次父类的构造函数；在改写子类的prototype属性，生成的实例时又调用了一次父类的构造函数。

寄生组合继承

组合继承方案已经足够好，但是针对其存在的缺点，我们仍然可以进行优化。

在进行子类的prototype属性的设置时，可以去掉父类实例的属性的函数。

  //父类
function Animal (age) {
  // 实例属性
  this.name = 'Animal'
  this.age = age
  this.skill = ['eat', 'jump', 'sleep']
  // 实例函数
  this.sleep = function () {
    console.log(this.name + '正在睡觉')
  }
}
// 原型函数
Animal.prototype.eat = function (food) {
  console.log(`${this.name}正在吃${food}`)
}
// 子类
function Cat (name) {
  // 继承父类的实例和属性
  Animal.call(this)
  this.name = name
}
// 继承父类原型上的实例和属性
Cat.prototype = Object.create(Animal.prototype)
Cat.prototype.constructor = Cat
let cat = new Cat('Tom')

console.log(cat.name) // Tom
cat.sleep() // Tom正在睡觉
cat.eat('猫罐头') // Tom正在吃猫罐头

其中最关键的语句：

Cat.prototype = Object.create(Animal.prototype)

只取父类Animal的prototype属性，过滤掉Animal的实例属性，从而避免了父类的实例属性绑定两次。

这种寄生组合式继承方式，基本可以解决前几种继承方式的缺点，较好地实现了继承想要的结果，同时也减少了构造次数，减少了性能的开销。

整体看下来，这六种继承方式中，寄生组合式继承是这里面最优的继承方式。

WQ's personal blog

love the world and love you