__proto__和prototype的区别和关系?

prototype(显示原型)是“类”的原型,指向该方法的原型对象。proto(隐式原型)是对象的原型,指向该对象的构造函数的原型对象。

JS当然没有“类”,只有constructor。
constructor就是当你new fn()时的那个“fn”。
fn的时候,产生的实例的__proto__指向fn.prototype,两者是同一个东西。

function Foo(){}
var foo = new Foo()
Foo.prototype.__proto__ === Object.prototype //true
  • prototype:每一个函数在创建之后都会拥有一个名为prototype的属性,这个属性指向函数的原型对象。

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

  • Note: Object.prototype 这个对象是个例外,它的__proto__值为null

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

__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中新增的方法,在这之前这被称为原型式继承。

下面看几个例子练习一下:

内建对象(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 理由同上
//这时我们想让Foo继承Bar
function 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

以上情况都等于完全重写了Foo.prototype,所以Foo.prototype.constructor也跟着改变了,于是乎constructor这个属性和原来的构造函数Foo()也就切断了联系。

此外:

构造函数Foo()除了是方法,也是对象啊,它也有__proto__属性,指向谁呢?指向它的构造函数的原型对象呗。函数的构造函数不就是Function嘛,因此这里的__proto__指向了Function.prototype。其实除了Foo(),Function(), Object()也是一样的道理。原型对象也是对象啊,它的__proto__属性,又指向谁呢?同理,指向它的构造函数的原型对象呗。这里是Object.prototype.最后,Object.prototype的__proto__属性指向null。

构造函数的隐式原型

既然是构造函数那么它就是Function()的实例,因此也就指向Function.prototype,比如 Object.proto === Function.prototype

instanceof

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

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

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

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