JS中__proto__和prototype的区别和关系

 

__proto__(隐式原型)与prototype(显式原型)

　1.它们是什么?

• 显式原型(explicit prototype property):
  

　　  每个函数在创建之后都会拥有一个名为prototype的属性,这个属性指向函数的原型对象。

　　　Note:通过Function.prototype.bind方法构造出来的函数是个例外,它没有prototype属性。

• 隐式原型(implicit prototype link):

　　  JS中任意对象都有一个内置属性[[prototype]],在ES5之前没有标准的方法访问这个内置属性,但是大多数浏览器都支持通过__proto__来访问。

　　　ES5中有路对于这个内置属性标准的Get方法Object.getPrototype()。

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

• 二者的关系:

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

　　2.作用是什么

• 显示原型的作用:用来实现基于原型的继承与属性的共享。
• 隐式原型的作用:构成原型链,同样用于实现基于原型的继承。

　　　举个例子,当我们访问obj这个对象中的x属性时,若在obj中找不到,那么就会沿着__proto__依次查找。

　　3.__proto__的指向

　　　__proto__的指向到底如何判断呢?根据ECMA定义to the value of it's constructor's prototype----->指向创建这个对象的函数的显式原型。

　　　所以关键在于找到创建这个对象的构造函数,接下来就来看一下JS中对象被创建的方式,一眼看过去似乎有三种方式:

　　　(1).对象字面量的方式;

　　　(2).new的方式;

　　　(3).ES5中的Object.create()但是我认为本质上只有一种方式,也就是通过new来创建。为何这么说呢?首先字面量的方式是一种为了开发

　　　　人员更方便创建对象的一个语法糖,在这之前这被称为原型式继承。

　　　　

　　　　所以从实现代码return new F()中我们可以看到,这依然是通过new来创建的。不同之处在于由Object.create()创建

　　　　出来的对象没有构造函数,看到这里你是不是要问,没有构造函数我怎么知道它的__proto__指向哪里呢?其实这里

　　　　说它没有构造函数是指在Object.create()函数外部我们不能访问到它的构造函数,然而在函数内部实现中是有的,它

　　　　短暂地存在了那么一会儿。假设我们现在就在函数内部,可以看到对象的构造函数是F,现在

　　　　

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

　　　　一个对象的__proto__指向谁了。

　　　　好了,还是举一些一眼看过去比较疑惑的例子来巩固一下。

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

　　　1.内置对象(built-in object):如Array(),Array.prototype.__proto__指向什么?

　　　　Array.prototype也是一个对象,该对象由Object()这个构造函数创建的,因此

　　　　Array.prototype.__proto__===Object.prototype //true,或者也可以这么理解,所有的内置对象都是由Objcet()创建而来。

• 自定义对象

　　　　1.默认情况下:

　　　　

　　　　2.其他情况:

　　　　(1)

　　　　

　　　　(2)

　　　　

　　　　注:以上两种情况都等于完全重写了Foo.prototype,所以Foo.prototype.contructor也跟着改变了,于是乎constructor

　　　　这个属性和原来的构造函数Foo()也就切断了联系。

• 构造函数的隐式原型

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

　　　　prototype

　　4.instanceof

　　　　instanceof操作符的内部实现机制和隐式原型、显示原型有直接的关系。instanceof的左值一般是一个对象,右值一般是一

　　　　个构造函数,用来判断左值是否是右值的实例。它的内部实现原理是这样的:

　　　　

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

　　　　表达式为什么会得到相应的值了。

　　　　

　　　　文章参考:JavaScript instanceof 运算符深入剖析,欢迎批评指正,交流学习。

转载于:https://www.cnblogs.com/BraveHeart97/p/9049546.html