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

饥人谷

本文为饥人谷讲师方方原创文章。

  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() 属性?

这句话大概是让 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 了。

再看复杂一点的

回到第一幅图


我们写一句代码

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

请问这两句话做了什么?

看红色部分,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 的意义就是把共有属性预先定义好,给之后的对象用。

自己想想吧~

新人搞不懂原型大抵是因为

  1. 不懂内存、引用
  2. 不懂链表、树等数据结构
  3. 不知道函数是一种对象
  4. 被 Java 的 class 关键字毒害了
  5. 还有一种可能是因为没遇到我方应杭:
「每日一题」什么是 JS 原型链?
JS 的 new 到底是干什么的?
this 的值到底是什么?一次说清楚

以上是「方三篇」新人一定要看哦。

想看视频版本可以购买我的网课(收费):
JS 深入浅出 - 写代码啦!

这幅图我还可以继续讲,把 JS 所有基础知识都能串起来。

比如很多人不懂什么是伪数组,很简单:

  1. 如果一个数组的 proto 直接或间接指向 Array.prototye(用到了数组的共用属性),那么就是真数组
  2. 如果一个数组的 proto 没有直接或间接指向 Array.prototye,那么就是伪数组
var realArr = {0: 'a', 1:'b', length: 2}
realArr.__proto__ = Array.prototye
// 这就是真数组
// 等价于 realArr = ['a', 'b']
realArr.push !== undefined // true

var fakeArr = {0: 'a', 1:'b', length: 2}
// 这就是伪数组
realArr.push === undefined // true

完。

加微信号: astak10或者长按识别下方二维码进入前端技术交流群 ,暗号:写代码啦

每日一题,每周资源推荐,精彩博客推荐,工作、笔试、面试经验交流解答,免费直播课,群友轻分享... ,数不尽的福利免费送

阅读 2k

前端学习指南
最有爱的前端交流专栏

最有爱的前端交流社区

979 声望
127 粉丝
0 条评论
你知道吗?

最有爱的前端交流社区

979 声望
127 粉丝
宣传栏