常见的继承方式有哪些
循序渐进着来看，分为以下几种
- 类(原型链)继承 —— 用父类的实例重写子类原型对象
- 构造函数继承(经典继承) —— 在子类构造函数中调用父类构造函数
- 组合继承(伪经典继承) —— 使用原型链实现原型属性继承，借用构造函数实现实例属性继承
- 原型式继承(是对类式继承的封装) —— ≈ 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
结论
- SuperClass 在子类实例的原型链上
- 父类的自有属性在子类实例的原型上，若属性为引用数据类型，则多实例 "共享" (数据污染)
构造函数继承
看代码
// 声明父类
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
结论
- SuperClass 不在子类实例的原型链上
- 父类的自有属性也成为了子类的自有属性，且引用数据类型的数据 "不共享"
组合继承
看代码
// 声明父类
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
结论
- SuperClass 在子类实例的原型链上
- 父类的自有属性也成为了子类的自有属性，且引用数据类型的数据 "不共享"
原型式继承 (父元素为纯对象)
看代码
// 基于原有对象创建一个新个对象并将原型指向原有对象
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
结论
- SuperClass 不在子类实例的原型链上
- 父类的自有属性在子类实例的原型上，但引用数据类型的数据 "共享"
寄生式继承
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
结论
- 相当于原型继承的加强版，使得对象既有原型属性 / 方法，又有自有属性 / 方法
寄生组合式继承
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
结论
- 子类拥有父类的自有属性
- SuperClass 在子类的原型链上
- 子类原型的原型中有父类原型中定义的方法和属性
- 实例数据不共享
总结
| Constructor | instanceof SuperClass | 不同实例之间数据污染 | |
|---|---|---|---|
| 类(原型链)继承 | SuperClass | √ | √ |
| 构造函数继承 | SubClass | × | × |
| 组合继承 | SuperClass | √ | × |
| 原型继承 | Object | × | √ |
| 寄生式继承 | Object | × | √ |
| 寄生组合式继承 | SuperClass | √ | × |
注
- 基类(父类)的 constructor 指针默认指向自身，派生类(子类)的 constructor 默认指向基类
- 子类的 constructor 指针指向可以更改，例
Subclass.prototype.constructor = SubClass- 凡子类直接通过原型赋值继承来的父类属性都是浅拷贝，存在数据污染的情况
