带你看懂JavaScript的继承(一) js的继承基础

最近面试接触了很多前端开发人员,简历上大多是一年到三年的工作经验。在讨论到JS的继承问题时,大多数人并不是很清楚,我也发现我在这个知识点上存在一些漏洞,所以在这里整理一下,如有错误,期待大家的指正,我们共同进步。

继承是所有OO语言中的一个最为人津津乐道的概念。也是JS一个非常重要的基础之一。ES6中更明确了Class这个概念。所以从原理上透彻的理解JS中的继承,是JS Coder一个必须具备的基础之一。

我们所熟知的JAVA,C#等OO语言支持两种继承方式:接口继承实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。在JS中,我们是没有函数签名(由参数个数与其类型组成)的这个概念的。因为其函数的参数是以一个包含零或多个值的数组形式传递的。解析器不会验证命名参数。而且,函数是对象,函数名仅仅是是指针。所以JS只能通过实现继承的方法来继承。

####原型链
原型链是我们实现继承的主要方法。基本原理就是利用原型让一个引用类型继承另一个引用类型的属性和方法。这里我们要讲一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,实例都包含一个指向原型对象的的内部指针

设想一下,我们让原型对象等于另一个类型的实例。显然,此时的原型对象将包含一个指向另一个原型的指针。相应的,另一个原型中,也包含着一个指向另一个构造函数的指针。

假如另一个原型又是另一个类型的实例,那么上述关系依然成立。如此蹭蹭递进,就构成了实例与原型的联调。这就是原型的基本概念。

上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function SuperType(){
this.property = true;
}

SuperType.prototype.getSuperValue = function(){
return this.property;
}

function SubType(){
this.subproperty = false;
}
//实现了SubType继承SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){
return this.subproperty;
}
var instance = new SubType();
alert(instance.getSuperValue()) //true

小结:这次我们主要介绍了JS只能采用实现继承的原因,JS继承的基础原理原型链的概念以及一个简单的原型链例子。在下次中,我们将深入解析JS继承的原理,敬请期待。