JavaScript深入之从原型到原型链
mqyqingfeng opened this issue · 334 comments
构造函数创建对象
我们先使用构造函数创建一个对象：
function Person() {
}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。
很简单吧，接下来进入正题：
prototype
每个函数都有一个 prototype 属性，就是我们经常在各种例子中看到的那个 prototype ，比如：
function Person() {
}
// 虽然写在注释里，但是你要注意：
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin那这个函数的 prototype 属性到底指向的是什么呢？是这个函数的原型吗？
其实，函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型，也就是这个例子中的 person1 和 person2 的原型。
那什么是原型呢？你可以这样理解：每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。
让我们用一张图表示构造函数和实例原型之间的关系：
在这张图中我们用 Object.prototype 表示实例原型。
那么我们该怎么表示实例与实例原型，也就是 person 和 Person.prototype 之间的关系呢，这时候我们就要讲到第二个属性：
__proto__
这是每一个JavaScript对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向该对象的原型。
为了证明这一点,我们可以在火狐或者谷歌中输入：
function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true于是我们更新下关系图：
既然实例对象和构造函数都可以指向原型，那么原型是否有属性指向构造函数或者实例呢？
constructor
指向实例倒是没有，因为一个构造函数可以生成多个实例，但是原型指向构造函数倒是有的，这就要讲到第三个属性：constructor，每个原型都有一个 constructor 属性指向关联的构造函数。
为了验证这一点，我们可以尝试：
function Person() {
}
console.log(Person === Person.prototype.constructor); // true所以再更新下关系图：
综上我们已经得出：
function Person() {
}
var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true了解了构造函数、实例原型、和实例之间的关系，接下来我们讲讲实例和原型的关系：
实例与原型
当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
举个例子：
function Person() {
}
Person.prototype.name = 'Kevin';
var person = new Person();
person.name = 'Daisy';
console.log(person.name) // Daisy
delete person.name;
console.log(person.name) // Kevin在这个例子中，我们给实例对象 person 添加了 name 属性，当我们打印 person.name 的时候，结果自然为 Daisy。
但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__proto__ ，也就是 Person.prototype中查找，幸运的是我们找到了 name 属性，结果为 Kevin。
但是万一还没有找到呢？原型的原型又是什么呢？
原型的原型
在前面，我们已经讲了原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它，那就是：
var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin其实原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 __proto__ 指向构造函数的 prototype ，所以我们再更新下关系图：
原型链
那 Object.prototype 的原型呢？
null，我们可以打印：
console.log(Object.prototype.__proto__ === null) // true然而 null 究竟代表了什么呢？
引用阮一峰老师的 《undefined与null的区别》 就是：
null 表示“没有对象”，即该处不应该有值。
所以 Object.prototype.__proto__ 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。
所以查找属性的时候查到 Object.prototype 就可以停止查找了。
最后一张关系图也可以更新为：
顺便还要说一下，图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。
补充
最后，补充三点大家可能不会注意的地方：
constructor
首先是 constructor 属性，我们看个例子：
function Person() {
}
var person = new Person();
console.log(person.constructor === Person); // true当获取 person.constructor 时，其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时，会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性，所以：
person.constructor === Person.prototype.constructor__proto__
其次是 __proto__ ，绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于 Person.prototype 中，实际上，它是来自于 Object.prototype ，与其说是一个属性，不如说是一个 getter/setter，当使用 obj.__proto__ 时，可以理解成返回了 Object.getPrototypeOf(obj)。
真的是继承吗？
最后是关于继承，前面我们讲到“每一个对象都会从原型‘继承’属性”，实际上，继承是一个十分具有迷惑性的说法，引用《你不知道的JavaScript》中的话，就是：
继承意味着复制操作，然而 JavaScript 默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。
下一篇文章
深入系列
JavaScript深入系列目录地址：https://github.com/mqyqingfeng/Blog。
JavaScript深入系列预计写十五篇左右，旨在帮大家捋顺JavaScript底层知识，重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。
如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎star，对作者也是一种鼓励。
关于Function__proto__===Function.prototype的问题,
是不是可以说Function也是Function本身的一个实例呢？这个具体该怎么理解js这种设计理念呢，Function是不是既充当鸡又充当蛋呢。。。
哈哈，刚才忙着修改图片的地址去了，原来让我建issue是和我交流这个问题，我赞同贺师俊大神在知乎上的回答，看你的文章中也有引用。Function作为一个内置对象，是运行前就已经存在的东西，所以根本就不会根据自己生成自己，所以就没有什么鸡生蛋蛋生鸡，就是鸡生蛋。至于为什么Function.__proto__ === Function.prototype，我认为有两种可能：一是为了保持与其他函数一致，二是就是表明一种关系而已。
简单的说，我认为：就是先有的Function，然后实现上把原型指向了Function.prototype，但是我们不能倒过来推测因为Function.__proto__ === Function.prototype，所以Function调用了自己生成了自己。
在这一块一直纠结...感觉这一款按照正常的思维理解总感觉是自相矛盾一样,但事实就是已经存在规定好的东西,感觉有时候在研究玄学...
还有博主写的this那一块,一般人看着也是懵逼,我之前也一直想从ECMAScript写一下this,发现好难写,感觉自己都说服不鸟自己了,认真写一个东西,本来想写一个点,然后发现写成了一条线,最后把持不住瞎扯就扯到一个面了,自己最后都驾驭不住了,所以最后就没写,感觉写着写着自己都不懂了,别人更难看懂...蛋疼,功力不够😄
哈哈，难怪你的文章有的加了个标签叫玄学，大家都是要多看多学多交流，才能越来越看清本质。
写this这一块的时候，本来是想像很多文章那样介绍各种情形下的this指向，但是看了篇从规范解读this的文章，就再也说服不了自己去写各种情形，就决定一定要从规范介绍this才能更接近本质。刚开始看也是一脸懵逼，想着自己还要写文章嘞，没有办法，愣是跟着阅读的顺序，一节一节看规范，看到最后才终于明白了很多。去写this这篇文章时，写到最后，也是感觉有些晦涩难懂，但又不肯放弃，从各种情形去介绍，如你所说，还是功力不够的表现呐。
大家多多交流哈
东西的本质最后都是教科书上的东西.
从现象到本质,再从本质回归到现象,感觉这样才能融会贯通,更好的为我所用.
可以理解为原型是prototype，原型链是通过__proto__ 链接起来的吗
@jDragonV 函数的prototype属性指向原型，说prototype是原型略显不严谨，原型链通过__proto__链接起来，这个是可以的。
指向实例倒是没有，因为一个构造函数可以生成多个实例，但是原型指向构造函数倒是有的，这就要讲到第三个属性：construcotr 应该改为 constructor
@zhuangyin8 哈哈，感谢指正，o(￣▽￣)ｄ
本来就对一些概念模糊，感谢博主分享，涨知识！
博主下一个系类准备写写V8源码逐行解读，带你认识真实的浏览器JS引擎，欢迎期待和关注！@Hanxiaobo
@jawil 这个系列我很期待，一定搬板凳围观~
不错
讲错了，理解原型链错了。
@Zhi-Peng 快来讲讲原型链
加深理解。不过，“prototype是函数才会有的属性”是为了方便解释吗？
@wedaren 写这一句是想让大家区分 prototype 和 __proto__，prototype 是函数才会有的属性， 而__proto__ 是几乎所有对象都有的属性
@mqyqingfeng 看了你在掘金上 "我为什么要写深入系列？"这段感悟，深有共鸣。我是一个自学的野路子前端，JavaScript 底层概念没弄明白心里非常不踏实，不明白底层去上手做东西速度太慢了，始终有些东西有一种模糊感，不踏实。
@zuoyi615 我也是个自学的野路子，与你共勉~
野路子半吊子前端速来集合，偷偷告诉你 ，我最先是学的网管专业的😄
共勉
原来还可以这样玩github，受教了，自带评论功能
发现博主的一个笔误，就是补充那一块，讲解person.constructor那里。你说
会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性，所以：
而person是new出来的，并没有原型，是Person的原型（Person.prototype）里获取到，应该是笔误了吧！
请问例图是用什么工具画的？
@thesadfrog 哈哈，很多人都有这样写哦，比如上面的 @jawil ，说起来，本来我是准备下个系列再写到 issues 里的，但是 @jawil 建议我写在 issues 里面，方便大家讨论，于是才写在 issues 里的，要感谢下 @jawil o(￣▽￣)ｄ
@JarvenIV 哈哈， prototype 是函数的一个属性，并不是表示原型，Person.prototype 指向 person 实例的原型，也就是 person.__proto__，__proto__表示的是原型。
@miyoosan ProcessOn，免费版有做图数的限制，不过还好只有这篇文章用到了~
@mqyqingfeng 好，thanks
看了俩遍才看懂。 理解能力实在不行
@li305263 不要自我否定，重要的是结果 o(￣▽￣)ｄ
赞 楼主，非常简易的表达出了，实例 -> 原型 和原型链的一些关系
关于这个问题Function.__proto__ === Function.prototype 犯糊涂
可能是忽略了2点，js特点
1.原型必然是一个对象，所以对Function的上下文作用自然就混乱了。
2.js里严格说并没有类，全是对象，函数和别的语言不同，js里函数本质还是对象。
作为构造函数
如果new Function()必然会生成一个函数对象，而所有的生成的函数对象都继承自一个匿名函数对象
所以Function.prototype指向了function anonymous()。
所以作为对象
Function就是一个名字叫Function的函数对象，对象继承字一个匿名的函数对象
所以Function.__proto__ 指向了function anonymous()
举个例子可以方便理解可以验证一下
var foo = new Function();
function woo() { }
var fooObj = new foo()
var wooObj = new woo()
window.onload = function () {
console.log("对象")
console.dir(Function.__proto__)
console.dir(foo.__proto__)
console.dir(woo.__proto__)
console.dir(fooObj instanceof foo)
console.dir(wooObj instanceof woo)
console.dir(foo instanceof Function)
console.dir(woo instanceof Function)
console.dir(Function instanceof Function)
console.log("函数")
console.dir(Function.prototype)
console.dir(foo.prototype)
console.dir(woo.prototype)
}
结果
对象
(index):16 function anonymous()
(index):17 function anonymous()
(index):18 function anonymous()
(index):19 true
(index):20 true
(index):21 true
(index):22 true
(index):23 true
函数
(index):25 function anonymous()
(index):26 Object
(index):27 Object
可以看出函数都继承自function anonymous()这么一个函数对象，这是前提。
只是Function函数和平时遇到的函数不同，Function构造函数为的就是生成函数对象，根据上例可以看到所有函数都继承自function anonymous()，所以Function的prototype属性只能是function anonymous()。
这样new Function就能得到继承自function anonymous()函数对象的函数了
而除了Function函数，其他函数都是为了生成传统的大家最熟悉的对象的，所以prototype属性指向了Object
这样new foo 和 woo 就能得到继承自Object的对象
Function.__proto__ === Function.prototype 可以明白了并不是自己调用自己
而是Function.__proto__ 和Function.prototype因为功能和普通函数不同，并且自身又是函数对象，所以才恰好的指向了相同的对象。
所以Function.proto === Function.prototype并没有什么好奇怪的，也并没有什么逻辑矛盾，更不是玄学。
我挺喜欢你的文章，配图也好懂，希望能互相star
原型链这章节，你说
那 Object.prototype 的原型呢？ null，不信我们可以打印：
说的也不准确，不是说Object原型是null，而是object没有原型，null在js是没有对象的意思，比如void函数返回就是null，所以只能说明Object.prototype 没有返回任何对象，object就是原型链上最后的对象了，他没有原型了，而不是你的说法object的原型是null，js所有的东西都是从object继承来的，object就是最上层的对象了。
console.log(Object.prototype.__proto__ === null) // true
文章很好，但是我有个问题。
所以原型对象是通过 Object 构造函数生成的
这里的“所以“貌似有点勉强啊，理解不了~
@lemontreelxs 关于 Function.__proto__，我赞同你的看法，为了让 Function 继承自 Function.prototype 所指向的 function anonymous() 的方法，将 Function.__proto__ 也指向 function anonymous()，我比较好奇的是为什么:
typeof Function.prototype === 'function' // true
Array.isArray(Array.prototype) // true@lemontreelxs 关于 null ，在我看来，null 是一个表示“没有值”的特殊值，如果不是在底层设置了 Object.prototype.__proto__ 为 null 的话，打印 Obejct.prototype.__proto__的结果更像是一个undefind 或者是报错。
@Coande 是的，这里有逻辑错误，"可以"并不代表因果关系，还需要修改文章。感谢指出~o(￣▽￣)ｄ
@mqyqingfeng
typeof Function.prototype === 'function' // true
Array.isArray(Array.prototype) // true
少用typeof ，这个运算符表示的是对象的原型，不是咱们认为的类型。
window.onload = function () {
function foo(){}
function woo(){}
var fooObj = new foo();
var wooObj = new woo();
console.log(typeof fooObj === typeof wooObj)
console.log(fooObj instanceof foo)
console.log(wooObj instanceof foo)
console.log(typeof Function.prototype === typeof Function)
console.log( Function.prototype instanceof Function)
}
结果是
true
true
false
true
false
而 instanceof 则是对比的构造函数
最后一句可以看出，Function.prototype 的构造函数并不是 Function ，所以他们其实按咱们以往对类的认识
他们并不是一个类型，只是原型一样而已。
就像第一到第三的个结果，fooObj 和 WooObj ，虽然原型一样，但是wooObj并不是foo类型的对象
数组那个自己写两个数组dir一下展开看下就知道了，
Array.prototype 是货真价实的数组对象，其他数组不过就是拥有自己的length之类的属性，覆盖了Array.prototype那个原型的同名属性了而已。构造函数Array用prototype那个对象做模板，根据用户定义
覆盖了某些同名属性而生成的新的Array对象。
包括Function也一样，dir几个自造的函数，看看就明白了，道理和array一样。
其实js typeof 和 instance 并没有准确反映咱们在C++或者java里学到的那样的类，因为js本身就没有类
是咱么一厢情愿的非要按类去理解他。
typeof 是对比原型
instanceof 是对比constructor这个属性
都不是真的在对比类，硬要去理解当让就晕了
只要好好理解原型链就好了
@lemontreelxs 很抱歉回复晚了，为什么 typeof 是对比原型？
typeof Function.prototype === typeof Function // true这个结果之所以为 true ，是因为两边运算的结果为都是 "function" 字符串，并不能说明对比的是原型，而且就算讲到规范中，也是根据值的类型进行的判断，跟原型没有什么关系吧。
instanceof 是对比 constructor 这个属性也是无法理解，如果
a instanceof b判断的应该是 a 是否可以通过原型链找到 b.prototype 所指向的原型，跟 constructor 也没有任何关系，constructor 只是一个表示对应构造函数的属性。
看第一遍 我已经晕了
@guoxiangwen 遇到这个问题其实很容易解决，那就是再看一遍，不行的话，明天再看一遍~ 作者就是这样走过来的~
看评论就可以学到很多啊
写的很好很简单易懂
@mqyqingfeng
谢谢你耐心看完我的评论。
有时间我还会拜读你剩下的14篇，继续对你吹毛求疵呵呵，到时还希望你耐心解答啊
@lemontreelxs 哈哈，非常欢迎~ 关于 Object.prototype.__proto__ === null 为 true 的问题，这些天一直在查资料，有了进一步的进展，再跟你讨论哈~
哇哇哇. 看得我哇哇大叫, 如何是好. 刚开始还好, 越看越晕. 每天习惯性的来你的GIT上面逛逛, 我就不信看不懂.
@Evllis 哈哈，就是要有这样的毅力 o(￣▽￣)ｄ，如果有不明白的地方就留言跟大家讨论哈~
有个疑问，在这图中：
为什么Person.prototype.proto = Object.prototype?
@jeyfang123 原型是对象，由 var obj = new Object() 生成，所以原型是 Object构造函数的实例
请问下，Person.proto === Function.prototype, 这里的Person构造函数的prototype和__proto__这个属性为何有这样的定义，只是因为它本身也是Function？
@dnd2 不仅仅如此，还可以让 Person 函数继承来自 Function.prototype 的方法，比如 toString、call、apply、bind 等
@lemontreelxs 关于 Object.prototype 原型的问题，非常感谢指出，我在知乎特地提了一个问题：Object.prototype.__proto__ 的值到底是 null 还是没有？， Object.prototype.__proto__ 的值为 null 表示没有原型，仅仅说值为 null 确实不严谨，再次感谢~
好像有一点说的不太对，权威指南上好像提到过，并不是所有的函数都有 prototype 属性，由函数 bind()
方法返回的函数就没有 prototype 属性。
@temple-deng 是的，感谢指出，说起来，在《JavaScript权威指南》第六版 8.7.2 节，讲到每一个函数都包含一个 prototype 属性，然后紧接着在 8.7.4 节 bind 函数，就讲到由 bind 方法返回的函数并不包含 prototype 属性。😂
以前也看了很多遍这种原型的解释，总是对这些东西有些模糊，虽然平常也是在用，感觉缺点什么，感谢这篇文章，一下子把整个【线】穿起来了
@zeroone001 非常高兴这篇文章能对你有所启发~ 作者在学习的过程中也遇到过很多将【线】穿起来的文章，与你共勉，保持学习的热情~
我当时学的时候就是牢记一句话： 实例.proto === 其构造函数.prototype，构造函数.prototype.constructor === 构造函数，一路向上找。简单粗暴
@dongliang1993 确实简单粗暴 😂
看完收获很大...会继续看下去的...感谢楼主分享
请教楼主一个问题。
怎么看待
Object.prototype.toString.call(Number.prototype)输出
"[object Number]"@qianlongo
Number是构造函数
Number.prototype是Number构造函数的原型对象 继承自Object.prototype 显示"[object Number]" 没问题啊
Object.prototype.isPrototypeOf(Number.prototype) //true
@qianlongo 其实有这种特性的不止 Number.prototype，还有其他如 Array、Function 等内置构造函数
Object.prototype.toString.call(Array.prototype) // "[object Array]"尽管 Number.prototype 是一个对象，Object.prototype.toString 照理输出 '[object object]'，但是可能是考虑到都是输出 object，无法对这些特殊的内置构造函数的原型做出区分，所以在规范中，就对这些内置构造函数的原型的 [[Class]] 内部属性重新进行了设置，规范地址：http://es5.github.io/#x15.7.4
而 Object.prototype.toString 返回的就是由 [object 、[[Cass]]、 ]组成的字符串
长姿势了长姿势了，太感谢楼主的这篇文章，收获特别大！
@deot 未来的 ES6 系列会讲到 Babel 是如何编译 class ~
其他基本是看懂了，但是原型的原型那一块有点不太理解，
为什么Person.prototype就是Object.prototype实例化的对象？
我看了你对其他的人回答，就是因为Person.prototype是对象，所以是new Object()这样构造出来，就是感觉有点牵强，对于这里有点不太理解？
其次像arr = new Array实例化出来的arr是Array的对象，也是Object的对象，就是因为这样的原型链吧？但是实例原型(Person.prototype/Array.prototype)到Object.prototype这里能够讲详细点，谢谢
@YanLIU0822 嗯，如果觉得牵强的话，那就这样理解，因为原型对象是通过 new Object 的方式生成的，所以原型对象的原型指向了 Object.prototype
嗯嗯 ，谢谢
我想问你一个关于原型模式创建对象的问题，在JS高级程序设计第三版中有提到，原型模式创建对象，会导致共享属性和方法，特别对于引用类型，会引起实例之间的改变，比如下图的friends，因为是引用类型，所以指向都一片空间，这个我可以理解。
但是我尝试给实例person1.sayName方法进行改变，并不会影响到person2.sayName方法，我之前觉得函数名也是引用，所以person1和person2的sayName这个函数应该指向同一片空间？它们之间会相互影响？
如果可以的话，麻烦给我解释一下，谢谢。
@YanLIU0822 当调用 person1.sayName 方法时，因为person1 对象没有 sayName 方法，所以会从原型中进行查找，但是如果直接 person1.sayName = function (){...}, 其实是给 person1 这个对象添加了 sayName 属性，属性值为一个方法，你打印一下 person1 对象就知道了~ 既然只是给这个对象添加一个属性，自然不会影响另一个对象~
你的意思，这里sayName就像是原始数据类型，当实例对象person1没有的sayName时候，会向原型链搜索，如果有sayName就会覆盖原型上的sayName？所以对person1修改sayName并不会影响到person2
@YanLIU0822 跟原始类型，引用类型没有关系。举个例子:
person1.friends = [1, 2, 3]
console.log(person2.friends) // 依然不受影响问题的根本在于 person1.sayName = function(){...} 是给 person1 (注意是这个 person1 对象)添加了一个 sayName 属性，而非修改了原型上的 sayName 属性值
嗯嗯，还有个问题，
我在看js程序设计的时候，constrctor stealing那里，
function Super() {}
function Sub(){Super.apply(this);}//这样就是Sub继承了Super
为什么这样算是继承？
相当于Sub.prototype = new Super();?
@YanLIU0822 你可以看这一篇 《JavaScript深入之继承的多种方式和优缺点》 中的“经典继承”部分
受教了，感谢大佬
受教了，不过关于Function.__proto__ === Function.prototype；其实很容易理解的。
不仅仅Function.__proto__ === Function.prototype，Object.__proto__ === Function.prototype也等于，Array.__proto__ === Function.prototype也等于。
仔细想想就能明白，Function，Object，Array最根本还是函数fn()，这跟我们自定义类（通常大写）的原理一致，也就是为什么typeof Array、typeof Object、typeof Function的结果都是 ‘function’。
我们很容易知道Function、Object、Array其实都是Function的实例，所以Function.__proto__ === Function.prototype、Object.__proto__ === Function.prototype
js的基础类型（出了null和undefined）都是方法，都是为了生成对象（包括函数对象）的，所以它们都继承至Function
@dushao103500 感谢补充哈~ 就像 var person = new Person() ，person.__proto__ 指向了 Person.prototype 一样，Function.__proto__ === Function.prototype 会让人认为 Function = new Function() ，自己竟然 new 出了自己？ 或许是这点让人有些疑惑吧~
mark
感谢，看了好多文章还是这个最好理解
楼主的博客，思路清晰，逻辑流畅，排版美观，语言简练。
总之，写得好~！
@foxpsd 感谢夸奖，我会以这个为标准要求自己~
已经讲的不能再明白了，赞一个！
思路非常清晰，手动点赞
简洁明了易懂图很棒！
最后关于__proto__的说法感觉不怎么正确，每个对象实例内部有一个[[Prototype]]属性是指向原型对象的，在firefox，safari和chrome中暴露出了一个 proto 可以给脚本访问，所以这个属性就是在实例对象上，是通过这个属性才能去一步步的找到原型链。
另外“当使用 obj.proto 时，可以理解成返回了 Object.getPrototypeOf(obj)”，其实是使用Object.getPrototypeOf(obj)时是去访问了内部的[[Prototype]]做到的，这点可以在 MDN 得到验证。
@yvanwangl 关键是 __proto__ 属性是否在实例对象上吧？我们来举个例子：
(function(){
var parent = new Object();
parent.__proto__ = {value: 1}
var child = Object.create(parent);
console.log(child.value); // 1
}())
;(function(){
var parent = Object.create(null);
parent.__proto__ = {value: 1}
var child = Object.create(parent);
console.log(child.value); // undefined
}())如果 __proto__ 属性在对象上，第二个例子中，是会正常打印 1 的，之所以打印 undefined，就是因为在第二段代码中，设置 parent.__proto__ 为一个对象的时候，因为访问不到 Object.prototype 上的 __proto__，所以无法设置原型，就设置了对象属性，所以 child 访问不到这个 value 值
每个对象实例内部有一个 [[Prototype]] 属性是指向原型对象的，在firefox，safari和chrome中暴露出了一个 'proto' 可以给脚本访问，这个 'proto' 是暴露出来的，当然不会 obj.proto= a; 就直接把 [[Prototype]] 给改掉，所以呢就在Object.prototype上设置了一个 'proto' 的 getter 和 setter ，但是就像 [[Prototype]] 是在每一个实例上一样，'proto' 也是在每个实例对象上的。
你的第二个例子中 用 Object.create(null) 创建一个空对象没有 getter 和 setter 所以 parent.proto 并没有改变 parent 的内部属性 [[Prototype]] 所以，你只是在 parent 上放了一个假的 'proto'，跟内部的 [[Prototype]] 并不能形成映射关系。
如果像作者所说__proto__是来自于 Object.prototype ；那么考虑如下例子：
function Person(){};
Person.prototype = null;
var person = new Person();
此时切断了person与Object.prototype的联系，那么 person.__proto__应该是什么呢，undefined ?
并不是.
@yvanwangl 这是另外一个问题，我来解释一下，假设原型是一个对象，叫 obj, Person.prototype 只是访问这个对象的方式而已，当你 new 的时候，person 的原型指向了 obj，但是你直接更改 Person.prototype 的值并不会更改 obj 的值，而是直接更改了 Person.prototype 的值，举个例子：
var obj = {value: 1};
var person = {
_prototype: obj
}
person._prototype = '1';
console.log(obj); // {value: 1}你修改 Person.prototype 的值，只会对下一次 new 的对象生效
如果__proto__来自Object.prototype，而Object.prototype.__proto__的值为null，那么new Person().__proto__是什么呢
还有，作者刚才的回复，Person的实例会依据Person.prototype进行创建，如果Person.prototype指向了新的对象，原来的对象就会被回收了，变不变有什么意义，我例子的重点是切断了原型链。
@yvanwangl (new Person()).__proto__ 当然是实例的原型对象呀，可以通过 Person.prototype 访问到，这跟 Object.prototype.__proto__ 为 null 又有什么关系呢？而且 null 的意思代表是没有，即 Object.prototype 并没有原型，所以查找属性的时候，查找到 Object.prototype 就可以停止查找了，而且 __proto__ 的 getter 和 setter 在 Object.prototype 上，查找到这里也该停止查找了，难道还能查找到 null 上，调用 null 上的 getter ？
@yvanwangl 我意思的重点是你并没有切断原型链，如果你觉得 Person.prototype = null 就可以切断已经 new 出的实例和它被 new 时的原型，那这个例子该如何解释呢？
function Person(){};
Person.prototype.value = 1;
var person = new Person();
Person.prototype = null;
console.log(person.value); // ???function Person(){};
Person.prototype = null;
var person = new Person(); @yvanwangl 应该是这样的，首先new的时候 产生ECMA原生对象，接着此对象的[[Prototype]] 属性是根据 函数PERSTON的prototype来设定的，如果此时prototype是一个对象，[[Prototype]] =那个设定的对象,如果不是一个对象，设定 obj 的 [[Prototype]] 内部属性为 Object 的 prototype 对象
博主你写的文章很好啊，博主有群吗 @mqyqingfeng