今天在拉勾上看了 js 中常见的 6 中继承方式,这里稍作下总结,输出一下笔记。

在面向对象编程中,为了能更好的复用以前的开发代码,缩短开发的周期,提高开发的效率,继承是一种很好的方法。它可以让我们使用继承的方式,去使用原有对象的一些方法或者属性。在 JavaScript 这么灵活的语言之中,常见的继承方式有六种,现在我们就来一个一个的过一遍。

原型链继承

原型链是比较常见的一种继承方式之一,其中涉及的到构造函数、原型和实例,三者之间存在一定的关系,如下图。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/17dfe380-8545-41e3-af72-09d9b9c4551f/Untitled.png

每一个构造函数都会有一个原型对象(构造函数的 prototype) ,原型对象又包含一个指向构造函数的指针(constructor),实例也有一个指向原型的指针(__proto__)。

实现原型链继承的代码很简单

function Person(){
	this.name = 'parent'
	this.play = [1, 2, 3]
}
function Child() {
	this.type = 'children'
}
Child.prototype = new Person() // *
console.log(new Child())

核心代码就是 Child.prototype = new Person()Child 的原型指针指向 Person 的实例。这样 Child 的实例就可以访问到 Person 的构造函数的属性和方法。

var child1 = new Child()
var child2 = new Child()

console.log(child1.name) // parent
child2.play.push('coding')
console.log(child1.play) // [1, 2, 3, 'coding'] *

但是,原型链继承的一个缺点就在于两个实例(child1child2 )访问的是同一个原型对象,所以,共享的是同一份数据,这就导致数据可能被篡改的风险。

为了解决这一问题,让我们接着介绍第二种继承方式。

构造函数继承(借用 call)