继承是为了子类可以使用父类的所有功能，并且能对这些功能进行扩展。
1. 构造函数继承（call&apply）
说明：直接利用call或者apply方法将父类构造函数的this绑定为子类构造函数的this就可以；
缺点：无法继承原型链上的属性与方法；
function Parent1() {
this.name = 'parent1'
}
Parent1.prototype.say = function () {
console.log(this.name)
}
function Child1() {
Parent1.call(this) //构造函数继承核心代码
this.type = 'child1'
}
let child1_1 = new Child1()
console.log(child1_1.name) // parent1
console.log(child1_1.say()) // child1_1.say is not a function
image
2. 原型继承
说明：将子类的原型挂载到父类上；
缺点：子类new出来的实例，父类的属性没有隔离，会相互影响；
function Parent2() {
this.name = 'parent2'
this.arr = [1, 2, 3]
}
Parent2.prototype.say = function () {
console.log(this.name)
}
function Child2() {
this.type = 'child2'
}
Child2.prototype = new Parent2() //原型继承核心代码
let child2_1 = new Child2()
let child2_2 = new Child2()
console.log(child2_1.name) // parent2
console.log(child2_1.say()) // parent2
child2_1.arr.push(4)
console.log(child2_1.arr, child2_2.arr) // [1, 2, 3, 4] [1, 2, 3, 4]
image
3. 组合继承
说明：组合上面的构造函数与原型继承的功能；
缺点：call()方法已经拿到父类所有的属性 ，后面再使用原型时也会有父类所有属性；
function Parent3() {
this.name = 'parent3'
this.arr = [1, 2, 3]
}
Parent3.prototype.say = function () {
console.log(this.name)
}
function Child3() {
Parent3.call(this)
this.type = 'child3'
}
Child3.prototype = new Parent3()
let child3_1 = new Child3()
let child3_2 = new Child3()
child3_1.arr.push(4)
console.log(child3_1.arr, child3_2.arr) // [1, 2, 3, 4] [1, 2, 3]
// 缺点是 Parent3执行了两次,child3中有重复属性
image
4. 寄生组合继承
说明：解决组合继承重复属性的问题，直接将子类的原型等于父类的原型，或者是用Object.create继承原型但不执行父类构造函数；
注意处理子类实例的 constructor 指向问题，new Parent2()也有这个问题；
function Parent4() {
this.name = 'parent4'
this.arr = [1, 2, 3]
}
Parent4.prototype.say = function () {
console.log(this.name)
}
function Child4() {
Parent4.call(this)
this.type = 'child4'
}
//子类的原型等于父类的原型
Child4.prototype = Parent4.prototype
//或 Child4.prototype = Object.create(Parent4.prototype)
//修复重写子类原型导致子类constructor属性被修改
Child4.prototype.constructor = Child4
let child4_1 = new Child4()
let child4_2 = new Child4()
child4_1.arr.push(4)
console.log(child4_1.arr, child4_2.arr) // [1, 2, 3, 4] [1, 2, 3]
console.log(child4_1.constructor === Child4) // true
console.log(child4_1.constructor === Parent4)// false
// 这里的Child4就是一个继承自Function的函数对象
console.log(Child4.constructor === Parent4) // false
image
5. Class继承
说明：ES6新增，class是一个语法糖，就是基于寄生组合继承来实现的；
class Parent5{
constructor(){
this.name = 'Parent5'
this.arr = [1, 2, 3]
}
say(){
console.log(this.name)
}
}
class Child5 extends Parent5{
constructor(){
super() //通过super()调用父类构造函数
this.type="Child5"
}
}
let child5_1 = new Child5()
let child5_2 = new Child5()
child5_1.arr.push(4)
console.log(child5_1.say()) // Parent5
console.log(child5_1.arr, child5_2.arr) // [1, 2, 3, 4] [1, 2, 3]
console.log(child5_1.constructor === Child5) // true
console.log(child5_2.constructor === Parent5) // false
image
1.ES6里Class的Extends继承原理
寄生组合式继承原理：
1.使用借用构造函数(call)来继承父类this声明的属性/方法
2.通过寄生式封装函数设置父类prototype为子类prototype的原型来继承父类的prototype声明的属性/方法
- 《你不知道的JS》上卷 A.1
class 很好地伪装成 JavaScript 中类和继承设计模式的解决方案，但是它实际上起到了反作用：它隐藏了许多问题并且带来了更多更细小但是危险的问题。
补充：constructor的作用
constructor属性不影响任何JavaScript的内部属性。instanceof检测对象的原型链，通常你是无法修改的（不过某些引擎通过私有的proto属性暴露出来）。
constructor其实没有什么用处，只是JavaScript语言设计的历史遗留物。由于constructor属性是可以变更的，所以未必真的指向对象的构造函数，只是一个提示。不过，从编程习惯上，我们应该尽量让对象的constructor指向其构造函数，以维持这个惯例。
作者：贺师俊
链接：https://www.zhihu.com/question/19951896/answer/13457869
补充：new与Object.create()区别
- new创建一个对象，执行构造函数。
- Object.create相当于创建一个对象，但是不执行构造函数。
function Parent(){
this.name="Parent"
}
Parent.prototype.age = '18'
let child_new = new Parent()
let child_create = Object.create(Parent.prototype)
console.log(child_new instanceof Parent) // true
console.log(child_create instanceof Parent) // true
console.log(child_new.name,child_new.age) // Parent 18
console.log(child_create.name,child_create.age) // undefined "18"
//简单模拟下 Object.create 如下：
function create(obj) {
let F = function () {}
F.prototype = obj
return new F()
}
网友评论