JS 中 __proto__ 和 prototype 存在的意义是什么？

作者：方应杭
链接：https://www.zhihu.com/question/56770432/answer/315342130
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


你的 JS 代码还没运行的时候，JS 环境里已经有一个 window 对象了
window 对象有一个 Object 属性，window.Object 是一个函数对象
window.Object 这个函数对象有一个重要属性是 prototype，干什么用的等会说
window.Object.prototype 里面有这么几个属性 toString（函数）、valueOf（函数）
好，目前先知道这些就够了。
然后我们写一句代码

var obj = {}
obj.toString()

这句代码做了啥？为什么 obj 有 toString() 属性？
<img src="https://pic1.zhimg.com/50/v2-b922d48b00aab4a12d27de1ffc9659fa_hd.jpg" data-caption="" data-size="normal" data-rawwidth="1432" data-rawheight="1202" class="origin_image zh-lightbox-thumb" width="1432" data-original="https://pic1.zhimg.com/v2-b922d48b00aab4a12d27de1ffc9659fa_r.jpg">

这句话大概是让 obj 变量指向一个空对象，这个空对象有个

__proto__

属性指向 window.Object.prototype。
这样你在调用 obj.toString() 的时候，obj 本身没有 toString，就去 obj.__proro__ 上面去找 toString。
所以你调用 obj.toString 的时候，实际上调用的是 window.Object.prototype.toString
那么 window.Object.prototype.toString 是怎么获取 obj 的内容的呢？
那是因为 obj.toString() 等价于 obj.toString.call(obj)
同时 obj.toString.call(obj) 等价于 window.Object.prototype.toString.call(obj)
这句话把 obj 传给 toString 了。

再看复杂一点的

回到第一幅图
<img src="https://pic3.zhimg.com/50/v2-bbeb97f9771363ba7e60f9e18a9271aa_hd.jpg" data-caption="" data-size="normal" data-rawwidth="720" data-rawheight="504" class="origin_image zh-lightbox-thumb" width="720" data-original="https://pic3.zhimg.com/v2-bbeb97f9771363ba7e60f9e18a9271aa_r.jpg">

我们写一句代码

var arr = []
arr.push(1) // [1]

请问这两句话做了什么？
<img src="https://pic2.zhimg.com/50/v2-ad47ad13ffce5c03f4f6367f19ff12bb_hd.jpg" data-caption="" data-size="normal" data-rawwidth="1756" data-rawheight="1366" class="origin_image zh-lightbox-thumb" width="1756" data-original="https://pic2.zhimg.com/v2-ad47ad13ffce5c03f4f6367f19ff12bb_r.jpg">

看红色部分，var arr = [] 大概会让 arr 指向一个空对象，然后 arr.__proto__ 指向 window.Array.prototype。（其实 arr 有一个 length:0，不过这里就忽略吧）
这样你在调用 arr.push 的时候，arr 自身没有 push 属性，就去 arr.__proto__ 上找 push
因此 arr.push 实际上是 window.Array.prototype.push
arr.push(1) 等价与 arr.push.call(arr,1)
arr.push.call(arr,1) 等价于 window.Array.prototype.push.call(arr, 1)

再再复杂一点

arr.valueOf() 做了什么?
arr 自身没有 valueOf，于是去 arr.__proto__ 上找
arr.__proto__ 只有 pop、push 也没有 valueOf，于是去 arr.__proto__.__proto__ 上找
arr.__proto__.__proto__ 就是 window.Object.prototype
所以 arr.valueOf 其实就是 window.Object.prototype.valueOf
arr.valueOf() 等价于 arr.valueOf.call(arr)
arr.valueOf.call(arr) 等价于 window.Object.prototype.valueOf.call(arr)

看，JavaScript 其实很优美很简单。
只是你想复杂了而已：
prototype 指向一块内存，这个内存里面有共用属性
__proto__ 指向同一块内存
prototype 和 __proto__ 的不同点在于
prototype 是构造函数的属性，而 __proto__ 是对象的属性

难点在于……构造函数也是对象！

如果没有 prototype，那么共用属性就没有立足之地
如果没有 __proto__，那么一个对象就不知道自己的共用属性有哪些。

反证法

假设我们把 __proto__ 去掉，那么

var obj = {}
obj.toString() // 报错，没有 toString 方法

所以你只能这样声明一个对象咯：

var obj = {
toString: window.Object.prototype.toString,
valueOf: window.Object.ptototype.valueOf
}
obj.toString() // '[object Object]'

知道 __proto__ 帮你省多少代码了吗？

假设我们删掉 prototype，包括 window.Object.prototype 和 window.Array.prototype。
那么 window.Object.prototype.toString 也一并被删除了。
然后我们基本就没法写代码了……

var obj = {}
obj.toString() // toString 不存在，因为 toString 没有定义过啊

prototype 的意义就是把共有属性预先定义好，给之后的对象用。
自己想想吧~