通常大家都是先学了 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~谢谢