听你

从设计初衷解释 JavaScript 原型链

通常大家都是先学了 C/C++/Java 这类语言,后两者面向对象的开发思路很相似,写一个 class,然后 new 出相应的实例对象,这些对象有的属性和方法是各自不同的,有的则是共享的类属性、类方法。如果要一个 class 要继承另一个,就直接用相应的语法继承就行了。但这个套路到了 JavaScript 上就似乎不适用了,因为 JavaScript 采用了原型继承的思路来实现面向对象的。

尤其是我们在刚学习 JavaScript 的时候一般是为了操作 DOM,甚至是直接使用了 jQuery 这样的类库,不大有面向对象开发的需求,于是也没深入去研究过这个。直到要找工作的时候,发现这是必考基础题,才开始查资料,发现和以前的套路有不同,更难以接受所谓的「基于原型的继承机制」。

上帝说要有类,就有了「类」

且说 JavaScript 一开始设计的时候,只是非常简易的脚本语言,但因为其中都是对象,所以需要一个机制来联系它们,最后还是设计了继承。但作者并没有用「类」的形式来实现,而是通过 new 一个「构造函数」来生成一个对象。

例如 Ruby 中,是实实在在地用了 class 声明了一个 Person 类,然后用 initialize 方法实例化一个对象,这个对象有自己的属性 name 和 gender。

1
2
3
4
5
6
7
class Person
def initialize(name, gender)
@name = name
@gender = gender
end
end
someone = Person.new('Jason', 'male')

在 JavaScript 中,并没有 class 的概念(ES6之后的语法糖暂且不提),而是使用了一个函数,运行 new 的时候便会根据这个 Person 函数生成一个对象,有其自己的属性 name 和 gender, 这个对象还有一个特别的属性,那就是__proto__,它的值就是Person.prototype的引用,后面再详细说。

1
2
3
4
5
6
7
8
function Person(name, gender){
this.name = name;
this.gender = gender;
}
var a = new Person("Jason", 'male');
var b = new Person("Amy", 'female');
console.log(a.name); // Jason
console.log(b.gender); // female

共享属性和方法

如上似乎实现了一个类,但实际上好像没有类变量或者类方法?因为通过 new 运算符生成的对象都是各自独立的,只不过它们的__proto__属性都是Person.prototype罢了。

为了共享属性和方法,就要用到这个见了几万遍的属性——prototype了。其实每一个函数都有一个prototype属性,通常是一个空的对象。如果给这个prototype对象里加点东西,那么由这个Person函数构造出来的对象便都能访问到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Person(name, gender){
this.name = name;
this.gender = gender;
}
console.log(Person.prototype); // {} 是一个空对象
Person.prototype = {
country: 'China'
};
var a = new Person("Jason", 'male');
var b = new Person("Amy", 'female');
console.log(a.name); // Jason
console.log(b.name); // Amy
console.log(a.country); // China
console.log(b.country); // China

为什么呢?在之前已经说了,通过Person这个函数new出来的对象,都自带了一个属性__proto__,它的值是指向Person.prototype,是一个引用。意思就是说这个实例对象直接instanceof Person的。而 Person.prototype.__proto__ 也是一个对象呀,因为Person.prototype是直接由Object生成的,所以 Person.prototype.__proto__ == Object.prototype

1
2
a.__proto__ == Person.prototype
a.__proto__.__proto__ == Person.prototype.__proto__ == Object.prototype

所以说,a对象是继承自Person的原型对象( Person.prototype ),而Person的原型对象又继承自Object的原型对象,这样就构成了原型链。

反过来看原型链

当我调用a.country的时候,会发现a对象里并没有这个属性,便开始根据原型链向上查找,也就是去找__proto__所指向的原型对象,看看它有没有country属性,如果有,就得到了,没有的话继续向上查找,直到Object.prototype为止,因为Object再往上就是null了。Object原型对象是最初始的原型了,没有再继承自别的地方了。

所以对象通常还自带了一个方法hasOwnProperty,用法如下:

1
2
3
a.hasOwnProperty('name'); // true
a.hasOwnProperty('gender'); // true
a.hasOwnProperty('country'); // false

可以得出,country属性并不是自己的属性,而是通过原型链向上查找得到的,也就是所谓的继承来的。当然啦,hasOwnProperty这个方法显然也不是在写Person构造函数时自己开发的,是通过原型链向上查找,直到Object.prototype才有的,也就是实际上是调用了a.__proto__.__proto__.hasOwnProperty('name')

instanceof这个运算符则是通过原型链来计算的。

1
2
3
4
5
6
a instanceof Person // true
a instanceof Object // true
a instanceof Dog // false
a.__proto__ = Object.prototype // 改变原型链的关系,跳过Person,直接继承自Object原型
a instanceof Person // false
a instanceof Object // true

写在最后

我总算是搞懂这个原型链了,实在是艰辛。搞明白这个之后才觉得,原型继承似乎更加好用。写文之前参考了阮一峰大大的文章,醍醐灌顶,所以根据自己的理解写下这些,希望能帮助更多的人理解原型链。

参考:Javascript 继承机制的设计思想

如有疏漏,欢迎评论指出,或者前往Github提出issue~谢谢