JavaScript之原型解析（上）

前言

原型这个概念在JavaScript这门语言中是一个核心关键的知识点，可是你是否真的已经彻底理解透彻了呢?可能我我的的理解能力较差，所以通过屡次翻阅书籍和实践我才真正了解原型，因此记录下来以加深理解，也以便往后深刻探讨。若有不正确的地方，欢迎斧正！

原型涉及到的概念

1. __proto__/[[prototype]]
2. prototype
3. constructor

区分原型指针和原型属性

注：首先要区分的是原型指针__proto__/[[prototype]]和原型属性prototype，不少时候咱们可能会把它们混为一谈，可是二者实际上不是同一种东西！！！

• 原型指针__proto__/[[prototype]]

先来看一个例子：

var obj = {};
function fn() {};
console.log(obj.__proto__ === Object.prototype); // true
console.log(obj.__proto__ === Object.getPrototypeOf(obj)); // true
console.log(fn.__proto__ === Function.prototype); // true
console.log(fn.__proto__ === Object.getPrototypeOf(Function)); // true

实际上，实例对象的原型指针[[prototype]]在某些宿主环境下是不能读取到的；
但也有例外:
(1) 在浏览器环境下原型指针能够使用__proto__属性读取到
(2) ECMAScript 5版本增长的新方法Object.getPrototypeOf()能够进行读取到

解释：
每一个对象在建立的时候都会有个原型指针的属性指向负责构造该对象的原型对象，以上面为例 ->
obj是由原型对象Object.prototype构造的，等同于使用new Object构造
fn是由原型对象Function.prototype构造的，等同于使用new Function构造

经典的原型链图示



谨记，往原型链向上追溯，最终都是由原型对象Object.prototype进行构造！

• 原型属性prototype

再来个栗子：

var obj = {};
function fn() {};
console.log(obj.prototype); // undefined
console.log(fn.prototype === Object.prototype); // false
console.log(fn.prototype === new fn().__proto__); // true
console.log(fn.prototype === Object.getPrototypeOf(new fn)); // true

解释：
之前我一直混淆的概念就在这里，
为何obj.prototype是undefined呢?
为何fn.prototype指向的不是Object.prototype?
若是你跟我同样有这样的疑惑的话，说明你理解错了原型指针__proto__/[[prototype]]和原型属性prototype的概念！！！

/**
* 1. 若是你想获得构造某对象的原型对象，你应该读取该对象的原型指针
* 2. 然而，读取某对象的原型属性prototype时，你的意图应该是想以该对象做为原型对象进行构造实际对象
/
// 这就解析了为何，实例对象new fn的原型指针__proto__指向了fn.prototype(fn的原型属性)
// 另外，由于obj是普通对象，不能够使用new关键字进行构造实例，所以天然也就没有原型属性了 -> undefined

若是还有疑惑，建议结合上面经典的原型链图示进行思考！

• 构造器指针constructor

老规矩，上代码

var obj = {};
function fn() {};
console.log(obj.constructor === Object); // true
console.log(fn.constructor === Function); // true
console.log(obj.hasOwnProperty('construnctor')); // false
console.log(fn.hasOwnProperty('construnctor')); // false

经过以上代码，咱们能够知道，其实obj和fn对象自身并无constructor这个属性，实际上constructor是构造他们的原型对象上面的属性，而且指向构造对象自己！（once again，若是还有疑惑请建议结合上面经典的原型链图示进行思考！）

参考文献

1. javascript高级程序设计（第三版）——[美]Nichilas C.Zakas 著
2. javascript权威指南（第6版）——David Flangan 著 淘宝前端团队 译