prototype - Javascript原型链原理分析

基本概念

由于理解角度的不同，不同的开发者，会对其有不同的定义和叫法。所以先明确本文中各种类型的称谓。
注：为了便于理解，暂时不考虑ES6，不引入Class等概念。

var Person = function(){};
var per = new Person();

1. 构造函数：与类的概念类似，其本质是通过function创建的函数，但会通过new的方式生成其对应的对象。Person即为一个构造函数。
2. 实例对象：即某一个构造函数所对应的对象。per即为构造函数Person的一个实例对象。
3. 原型对象：js中每个构造函数本身都有一个原型对象，原型对象中所定义的方法属性，可以直接在此构造函数的实例对象中使用。
4. 基类与派生类：js中内置构造函数包括Object、Array、Function、Boolean、Number、String、RegExp等，其中Object是所有其他内置构造函数的基类，其他内置构造函数是Object的派生类。

原型链

原型链本质上是一条获取资源（属性、方法）的链路。

这里先需要理解prototype和__proto__二者的形成过程，参照下图。

1. 原型对象 === 构造函数.prototype === 实例对象.__proto__

Person.prototype === per.__proto__
// => true

2. 由于所有对象都是Object的实例，原型对象也不例外，所以原型对象也是Object实例，所以原型对象.__proto__ === Object.prototype

per.__proto__.__proto__ ===  Object.prototype
Person.prototype.__proto__ === Object.prototype
// => true

3. 构造函数本身是一个函数，即是一个Function的实例对象，所以构造函数.__proto__=== Function.prototype。同理Object也是内置的构造函数，所以Object.__proto__=== Function.prototype

Person.__proto__ === Function.prototype
Object.__proto__ === Function.prototype
// => true

理解了上面的图，就可得知，当调用方法per.hasOwnProperty的时候，会依次到per.__proto__(Person的原型对象) -> per.__proto__.__proto__(Object的原型对象)去找名为hasOwnProperty的方法。此时形成的_proto_的链路即为原型链。

知识技能获取，感谢[网易云课堂 - 微专业 - 前端高级开发工程师]运营团队。