prototype（显式原型）

先让我们看看官方解释：ECMA

The value of the prototype property is used to initialise the [[Prototype]] internal property of a newly created object before the Function object is invoked as a constructor for that newly created object. This property has the attribute { [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: false }.
NOTE Function objects created using Function.prototype.bind do not have a prototype property.
译：
在调用Function对象作为新创建的对象的构造函数之前，prototype属性的值用于初始化新创建的对象的[[Prototype]]内部属性。该属性的属性为{[Writable]]：true，[[Enumerable]]：false，[[Configurable]]：false}。 注意使用Function.prototype.bind创建的函数对象不具有prototype属性。

1. 每一个函数在创建之后都会拥有一个名为prototype的属性，这个属性指向函数的原型对象。 （这也是原型链实现的一部分）

   proto（隐式原型）

   JavaScript中任意对象都有一个内置属性[[prototype]]，在ES5之前没有标准的方法访问这个内置属性，但是大多数浏览器都支持通过proto来访问。ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf().
   Note: Object.prototype这个对象是个例外，它的proto值为null

   两者关系

   隐式原型指向创建这个对象的函数(constructor)的prototype

   有什么作用？

2. 显式原型的作用：用来实现基于原型的继承与属性的共享。
3. 隐式原型的作用：构成原型链，同样用于实现基于原型的继承。举个例子，当我们访问obj这个对象中的x属性时，如果在obj中找不到，那么就会沿着proto依次查找。

   proto的指向

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

   1 2 3 4 5

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

所以从实现代码 return new F() 中我们可以看到，这依然是通过new来创建的。不同之处在于由 Object.create() 创建出来的对象没有构造函数，看到这里你是不是要问，没有构造函数我怎么知道它的proto指向哪里呢，其实这里说它没有构造函数是指在 Object.create() 函数外部我们不能访问到它的构造函数，然而在函数内部实现中是有的，它短暂地存在了那么一会儿。假设我们现在就在函数内部，可以看到对象的构造函数是F, 现在

1
2
3
4
5
6
7
8

//以下是用于验证的伪代码
var f = new F(); 
//于是有
f.__proto__ === F.prototype //true
//又因为
F.prototype === o;//true
//所以
f.__proto__ === o;

因此由Object.create(o)创建出来的对象它的隐式原型指向o。好了，对象的创建方式分析完了，现在你应该能够判断一个对象的proto指向谁了。

疑惑栗子

1. 构造函数的显示原型的隐式原型：
   内建对象：比如Array()，Array.prototype.proto指向什么？Array.prototype也是一个对象，对象就是由 Object() 这个构造函数创建的，因此Array.prototype.proto === Object.prototype //true，或者也可以这么理解，所有的内建对象都是由Object()创建而来。

2. 自定义对象
   （１） 默认情况下：

   1 2 3

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

   （２）　其他情况

   • 继承

     1 2 3 4

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

   • 重写原型

     1 2 3 4 5 6 7

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

   1. 构造函数的隐式原型
      既然是构造函数那么它就是Function（）的实例，因此也就指向Function.prototype,比如 Object.proto === Function.prototype

      instanceof

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

      1 2 3 4

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

也就是沿着L的proto一直寻找到原型链末端，直到等于R.prototype为止。知道了这个也就知道为什么以下这些奇怪的表达式为什么会得到相应的值了

1
2
3
4
5

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

最后一张图搞定

参考链接：https://www.zhihu.com/question/34183746