面向对象的继承实现
我们都知道在面向对象的世界里,所有的语言都能以各种各样的方式去完成继承。常见的有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 继承的效果。