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

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

1. 你的 JS 代码还没运行的时候，JS 环境里已经有一个 window 对象了
2. window 对象有一个 Object 属性，window.Object 是一个函数对象
3. window.Object 这个函数对象有一个重要属性是 prototype，干什么用的等会说
4. 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 的意义就是把共有属性预先定义好，给之后的对象用。

自己想想吧~