js 是怎样实现继承的

面向对象的继承实现

我们都知道在面向对象的世界里，所有的语言都能以各种各样的方式去完成继承。常见的有java,c++等，他们都能通过class类去继承父类的方法和属性等。作为前端开发的核心脚本语言JavaScript，也在ES6中支持了class类的继承。下面我们就来简单分析分析js是怎样实现继承的。

ES6中class的继承

class Father {
    constructor() {
       this.name = 'lei'
       this.age = 40 
    }
    show() {
        console.log('ni hao')
    }
}
class Son extends Father {}

let s = new Son()
console.log(s.name) // lei
s.show()    // ni hao

上例中可以看出在ES6中我们可以很轻松的实现了子类向父类属性和方法的继承。然而在ES5中class并没有真正定义出来是怎样实现的继承的呢？

ES5中js的继承

原型链继承

// 原型链继承
function Father(){
    this.name = 'xiao';
    this.colors = ['red','green','blue']
}
function Son() {

}
Son.prototype = new Father()
let s = new Son()
console.log(Son.prototype.name) // xiao
console.log(s.colors) // ['red','green','blue']

// 缺点（所有子类都会继承原型上的改变）
s.colors.push('black')
console.log(s.colors) // ['red','green','blue','black]
let ss = new Son()  
console.log(ss.colors) // ['red','green','blue','black]

借用构造函数继承

// 借用构造函数实现继承（解决原型链继承的问题）
function Father(){
    this.name = 'xiao';
    this.colors = ['red','green','blue']
}
function Son() {
    Father.call(this)
}
let s = new Son()
console.log(s.colors) // ['red','green','blue']
s.colors.push('black')
console.log(s.colors) // ['red','green','blue','black']
let ss = new Son()
console.log(ss.colors) // ['red','green','blue']

// 缺点(方法都在构造函数中定义，只能继承父类构造函数里面的内容，父类原型上的内容无法继承)
Father.prototype.age = 12
let sss = new Son()
console.log(sss.age)    // undefined

组合继承

// 组合继承(解决了前面的两个问题 实现了真正的继承)
function Father(){
    this.age = 12;
    this.name = ['red','green','blue']
}
Father.prototype.show = function() {
    return this.age
}

function Son() {
    Father.call(this)
}
// Son.prototype = new Father()    // 可以继承原型上的内容
Son.prototype = Object.create(Father.prototype)
// 等价于 Object.setPrototypeOf(Son.prototype, Father.prototype)
Son.prototype.constructor = Son // 区分new的实例是子类的还是父类的

let s = new Son()
console.log(s.name) // ['red','green','blue']
s.name.push('black')
console.log(s.name) // ['red','green','blue','black']
let ss = new Son()
console.log(ss.name) // ['red','green','blue']
console.log(ss.show()) // 12

组合继承才是js继承的最优方案，优化掉了原型链继承和借用构造函数继承的缺点，实现了真正意义的js继承。如下图示

子类实例s继承了父类Father的属性和方法,达到了ES extends 继承的效果。