JS 中的 __proto__ 与 prototype

__proto__ 探究

__proto__隐式原型与prototype显式原型是个容易使人混淆的概念，简而言之prototype是构造函数用来被本身的实例继承的原型，而_proto_是实例用来继承父类原型的载体。

1. 是什么

显式原型 explicit prototype property

每个函数在建立以后都会拥有一个名为prototype的属性，这个属性指向函数的原型对象，定义了该构造函数建立的全部实例对象共享的属性。
Note:经过Function.prototype.bind方法构造出来的函数是个例外，它没有prototype属性

NOTE Function objects created using Function.prototype.bind do not have a prototype property or the [[Code]], [[FormalParameters]], and [[Scope]] internal properties. ----- ECMAScript Language Specification

隐式原型 implicit prototype link

JavaScript中任意对象都有一个内置属性[[prototype]]，在ES5以前没有标准的方法访问这个内置属性，可是大多数浏览器都支持经过__proto__来访问。ES5中有了对于这个内置属性标准的Get方法，Object.getPrototypeOf() 。
__proto__是浏览器自实现的[[prototype]]

两者的关系

隐式原型指向建立这个对象的函数（构造函数constructor）的显式原型prototype

function Person(name) {this.name = name}
var person1 = new Person
console.log(person1.__proto__ === Person.prototype)                    // true
console.log(Object.getPrototypeOf(person1) === person1.__proto__)        // true
console.log(person1.prototype === person1.__proto__)                    // false
console.log(Object.getPrototypeOf(Person) === Person.__proto__)    // true
console.log(Person.prototype===Person.__proto__)                        // false
console.log(person1.constructor === Person)                                // true

2. 做用是什么

• 显示原型的做用：用来实现基于原型的继承与属性的共享。

ECMAScript does not use classes such as those in C++, Smalltalk, or Java. Instead objects may be created in various ways including via a literal notation or via constructors which create objects and then execute code that initialises all or part of them by assigning initial values to their properties. Each constructor is a function that has a property named “prototype” that is used to implement prototype-based inheritance and shared properties.Objects are created by using constructors in new expressions; for example, new Date(2009,11) creates a new Date object. ---- ECMAScript Language Specification

• 隐式原型的做用：构成原型链，一样用于实现基于原型的继承。举个例子，当咱们访问obj这个对象中的x属性时，若是在obj中找不到，那么就会沿着__proto__依次查找。

Every object created by a constructor has an implicit reference (called the object’s prototype) to the value of its constructor’s “prototype” ---- ECMAScript Language Specification

3. __proto__的指向

__proto__的指向到底如何判断呢？根据ECMA定义 'to the value of its constructor's "prototype" ' ----指向建立这个对象的函数（构造函数）的显式原型。因此关键的点在于找到建立这个对象的构造函数，接下来就来看一下JS中对象被建立的方式，一眼看过去彷佛有三种方式：对象字面量的方式 、new 的方式 、ES5中的Object.create() 可是我认为本质上只有一种方式，也就是经过new来建立。为何这么说呢，首先字面量的方式是一种为了开发人员更方便建立对象的一个语法糖，本质就是 var o = new Object(); o.xx = xx;o.yy=yy; 再来看看Object.create(),这是ES5中新增的方法，在这以前这被称为原型式继承

道格拉斯在2006年写了一篇文章，题为 Prototypal Inheritance In JavaScript。在这篇文章中，他介绍了一种实现继承的方法，这种方法并无使用严格意义上的构造函数。他的想法是借助原型能够基于已有的对象建立新对象，同时还不比所以建立自定义类型，为了达到这个目的，他给出了以下函数:

function object(o){
    function F(){}
    F.prototype = o;
    return new F()
}

----- 《JavaScript高级程序设计》P169

因此从实现代码 return new F() 中咱们能够看到，这依然是经过new来建立的。不一样之处在于由 Object.create() 建立出来的对象没有构造函数，看到这里你是否是要问，没有构造函数我怎么知道它的__proto__指向哪里呢，其实这里说它没有构造函数是指在 Object.create() 函数外部咱们不能访问到它的构造函数，然而在函数内部实现中是有的，它短暂地存在了那么一下子。假设咱们如今就在函数内部，能够看到对象的构造函数是F, 如今

// 如下是用于验证的伪代码
var f = new F(); 
// 因而有
f.__proto__ === F.prototype         // true
// 又由于
F.prototype === o;            // true
// 因此
f.__proto__ === o;

所以由Object.create(o)建立出来的对象它的隐式原型指向o。好了，对象的建立方式分析完了，如今你应该可以判断一个对象的__proto__指向谁了。
好吧，仍是举一些一眼看过去比较疑惑的例子来巩固一下。

• 构造函数的显示原型的隐式原型：

内建对象(built-in object)：好比Array()，Array.prototype.__proto__指向什么？Array.prototype也是一个对象，对象就是由 Object() 这个构造函数建立的，所以Array.prototype.__proto__ === Object.prototype //true，或者也能够这么理解，全部的内建对象都是由Object()建立而来。

• 自定义对象

默认状况下：

function Foo(){}
var foo = new Foo()
Foo.prototype.__proto__ === Object.prototype         // true 理由同上

其余状况：

function Bar(){}
//这时咱们想让Foo继承Bar
Foo.prototype = new Bar()
Foo.prototype.__proto__ === Bar.prototype //true

//咱们不想让Foo继承谁，可是咱们要本身从新定义Foo.prototype
Foo.prototype = {
  a:10,
  b:-10
}
//这种方式就是用了对象字面量的方式来建立一个对象，根据前文所述 
Foo.prototype.__proto__ === Object.prototype

Note： 以上两种状况都等于彻底重写了Foo.prototype，因此Foo.prototype.constructor也跟着改变了，因而乎constructor这个属性和原来的构造函数Foo（）也就切断了联系。

• 构造函数的隐式原型

既然是构造函数那么它就是Function（）的实例，所以也就指向Function.prototype,好比 Object.__proto__ === Function.prototype

4. instanceof

instanceof 操做符的内部实现机制和隐式原型、显式原型有直接的关系。instanceof的左值通常是一个对象，右值通常是一个构造函数，用来判断左值是不是右值的实例。它的内部实现原理是这样的：

// 设 L instanceof R 
// 经过判断
L.__proto__.__proto__ ..... === R.prototype ？
// 最终返回true or false

也就是沿着L的__proto__一直寻找到原型链末端，直到等于R.prototype为止。知道了这个也就知道为何如下这些奇怪的表达式为何会获得相应的值了，全部构造函数都是Fucntion的实例，全部对象都是Object的实例

Function instanceof Object // true 
Object instanceof Function // true 
Function instanceof Function //true
Object instanceof Object // true
Number instanceof Number //false

5. Js对象体系结构

• 每个对象都有__proto__，谁建立的对象（继承谁），__proto__就指向谁的prototype
• 全部的函数都是由Function()建立的，因此全部的函数的__proto__就指向Function的prototype，包括它本身
• 函数有prototype，普通实例对象没有，且函数的prototype都有一个自有属性constructor指向本身
• 全部的prototype也是对象，是由Object()建立（继承Object）而来的，因此全部的prototype的__proto__都指向Object

6. 谨慎操做__proto__

警告: 因为现代 JavaScript 引擎优化属性访问所带来的特性的关系，更改对象的 [[Prototype]]在各个浏览器和 JavaScript 引擎上都是一个很慢的操做。其在更改继承的性能上的影响是微妙而又普遍的，这不只仅限于 obj.__proto__ = ... 语句上的时间花费，并且可能会延伸到任何代码，那些能够访问任何[[Prototype]]已被更改的对象的代码。若是你关心性能，你应该避免设置一个对象的 [[Prototype]]。相反，你应该使用 Object.create()来建立带有你想要的[[Prototype]]的新对象。

---

网上的帖子大多深浅不一，甚至有些先后矛盾，在下的文章都是学习过程当中的总结，若是发现错误，欢迎留言指出~

参考：
一、 js中__proto__和prototype的区别和关系？
二、 G小调的悲伤的博客
三、 JavaScript instanceof 运算符深刻剖析

PS：欢迎你们关注个人公众号【前端下午茶】，一块儿加油吧~

另外能够加入「前端下午茶交流群」微信群，长按识别下面二维码便可加我好友，备注加群，我拉你入群～