聊一聊JS的继承

常见的继承方式有哪些

循序渐进着来看，分为以下几种

• 类(原型链)继承 —— 用父类的实例重写子类原型对象
• 构造函数继承(经典继承) —— 在子类构造函数中调用父类构造函数
• 组合继承(伪经典继承) —— 使用原型链实现原型属性继承，借用构造函数实现实例属性继承
• 原型式继承(是对类式继承的封装) —— ≈ Object.create(obj)
• 寄生式继承 —— 对原型式继承二次封装和拓展
• 寄生组合式继承 —— 寄生式 + 借用构造函数

类(原型链)继承

看代码

// 声明父类
function SuperClass(id) {
  this.id = id
  this.nums = [1, 2, 3]
}
// 给父类原型添加方法
SuperClass.prototype.getId = function () {
  return this.id
}
// 声明子类
function SubClass(id) {
  this.id = id
}
// 将父类的实例赋值给子类原型
SubClass.prototype = new SuperClass()
// 给子类原型添加方法
SubClass.prototype.getId = function () {
  return this.id
}
var instance1 = new SubClass(1)
var instance2 = new SubClass(2)
instance1.nums.push(4)
console.log(instance1)
console.log(instance2)

类继承.png

结论

1. SuperClass 在子类实例的原型链上
2. 父类的自有属性在子类实例的原型上，若属性为引用数据类型，则多实例 "共享" (数据污染)

构造函数继承

看代码

// 声明父类
function SuperClass(id) {
  this.id = id
  this.nums = [1, 2, 3]
}
// 给父类添加方法
SuperClass.prototype.showNums = function () {
  console.log(this.nums)
}
// 声明子类
function SubClass(id) {
  // 在子类中调用父类构造函数
  SuperClass.call(this, id)
}
var instance1 = new SubClass(1)
var instance2 = new SubClass(2)
instance2.nums.push(4)
console.log(instance1)
console.log(instance2)

借用构造函数继承.png

结论

1. SuperClass 不在子类实例的原型链上
2. 父类的自有属性也成为了子类的自有属性，且引用数据类型的数据 "不共享"

组合继承

看代码

// 声明父类
function SuperClass(id) {
  this.id = id
  this.nums = [1, 2, 3]
}
SuperClass.prototype.getNums = function () {
  console.log(this.nums)
}
// 声明子类
function SubClass(id) {
  // 在子类中调用父类构造函数
  SuperClass.call(this, id)
}
// 子类原型指向父类实例
SubClass.prototype = new SuperClass()

var instance1 = new SubClass(1)
var instance2 = new SubClass(2)
instance2.nums.push(4)
console.log(instance1)
console.log(instance2)

组合继承.png

结论

1. SuperClass 在子类实例的原型链上
2. 父类的自有属性也成为了子类的自有属性，且引用数据类型的数据 "不共享"

原型式继承 (父元素为纯对象)

看代码

// 基于原有对象创建一个新个对象并将原型指向原有对象
function inheritObject(obj) {
  function F() {}
  F.prototype = obj
  return new F()
}
var obj = {
  id: 1,
  nums: [1, 2, 3]
}

var instance1 = inheritObject(obj)
var instance2 = inheritObject(obj)
instance1.nums.push(4)
console.log(instance1)
console.log(instance2)

原型继承.png

结论

1. SuperClass 不在子类实例的原型链上
2. 父类的自有属性在子类实例的原型上，但引用数据类型的数据 "共享"

寄生式继承

var user = {
  name: 'sam',
  nums: [1, 2, 3]
}

function createUser(obj) {
  // 用原型继承的方式创建一个新对象
  var o = inheritObject(obj) 
  // 给这个新对象添加自有方法(增强对象)
  o.getNums = function () {
    console.log(this.nums)
  }
  return o
}

var instance1 = createUser(user)
var instance2 = createUser(user)
instance1.nums.push(4)
console.log(instance1)
console.log(instance2)

寄生式继承.png

结论

1. 相当于原型继承的加强版，使得对象既有原型属性 / 方法，又有自有属性 / 方法

寄生组合式继承

function inheritPrototype(subClass, superClass) {
  // 用原型继承的方式创建一个新对象
  var p = inheritObject(superClass.prototype)
  // 将新对象的构造函数指向子类
  p.construct = subClass
  // 将子类的原型指向这个新对象
  subClass.prototype = p
}
// 声明父类
function SuperClass(id) {
  this.id = id
  this.name = 'sam'
  this.nums = [1, 2, 3]
}
// 给父类原型添加方法
SuperClass.prototype.getNums = function () {
  console.log(this.nums)
}
// 声明子类
function SubClass(id) {
  // 调用父类以继承自有属性
  SuperClass.call(this, id)
}
inheritPrototype(SubClass, SuperClass)

var instance1 = new SubClass(1)
var instance2 = new SubClass(2)
instance1.nums.push(4)
console.log(instance1)
console.log(instance2)

寄生组合式继承.png

结论

1. 子类拥有父类的自有属性
2. SuperClass 在子类的原型链上
3. 子类原型的原型中有父类原型中定义的方法和属性
4. 实例数据不共享

总结

	Constructor	instanceof SuperClass	不同实例之间数据污染
类(原型链)继承	SuperClass	√	√
构造函数继承	SubClass	×	×
组合继承	SuperClass	√	×
原型继承	Object	×	√
寄生式继承	Object	×	√
寄生组合式继承	SuperClass	√	×

注

1. 基类(父类)的 constructor 指针默认指向自身，派生类(子类)的 constructor 默认指向基类
2. 子类的 constructor 指针指向可以更改，例 Subclass.prototype.constructor = SubClass
3. 凡子类直接通过原型赋值继承来的父类属性都是浅拷贝，存在数据污染的情况