资讯专栏INFORMATION COLUMN

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

msup / 2442人阅读

摘要:那么也一并被删除了。然后我们基本就没法写代码了不存在,因为没有定义过啊的意义就是把共有属性预先定义好,给之后的对象用。

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

你的 JS 代码还没运行的时候,JS 环境里已经有一个 window 对象了

window 对象有一个 Object 属性,window.Object 是一个函数对象

window.Object 这个函数对象有一个重要属性是 prototype,干什么用的等会说

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

自己想想吧~

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

不懂内存、引用

不懂链表、树等数据结构

不知道函数是一种对象

被 Java 的 class 关键字毒害了

还有一种可能是因为没遇到我方应杭:

「每日一题」什么是 JS 原型链?
JS 的 new 到底是干什么的?
this 的值到底是什么?一次说清楚

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

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

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

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

如果一个数组的 proto 直接或间接指向 Array.prototye(用到了数组的共用属性),那么就是真数组

如果一个数组的 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或者长按识别下方二维码进入前端技术交流群 ,暗号:写代码啦

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107396.html

相关文章

  • JS 原型解释

    首先明确两个概念: 构造函数和 instance 分别是什么 构造函数JS 中并没有在语法层面上面区分构造函数和普通函数, 唯一的区别是调用方式使用 new 调用的函数就是构造函数, 没有则是普通函数. 实例new Constructor() 返回的对象称为 Constructor 的一个实例 然后提出一个规则:在构造函数的原型上面附加的属性或者方法, 可以被其所有的实例共用. 可以推导出: ...

    silvertheo 评论0 收藏0
  • js 原型链、__proto__prototype

    摘要:另外常说的的构造函数,就是指这个。按照理解,可能会这样的疑问指向构造函数再次提醒,是一个对象的,所以这个对象的构造函数是它自己自己创建自己么额。。。 本文由用途意义,进行脑测解析,从需求角度走一遍原型链的发展。 用对象模拟类的继承 js中没有类(没有类,没有类,重要的事情说3遍)只有对象,怎么才能做到继承的效果? var a={x:1} var b={}; b.__proto__=a...

    shengguo 评论0 收藏0
  • 一篇文章带你理解原型原型链

    摘要:上面的代码,运行以后,我们可以看到因为的原型是指向的实例上的,所以可以访问他的属性值,那如果我不想让访问的构造函数里声明的属性值,那怎么办呢只需要将指向的原型而不是实例就行了。 走在前端的大道上 本篇将自己读过的相关 javascript原型和原型链 文章中,对自己有启发的章节片段总结在这(会对原文进行删改),会不断丰富提炼总结更新。 文章——深入理解javascript之原型 一般的...

    yintaolaowanzi 评论0 收藏0
  • js 原型链那些事儿

    摘要:原型链首先,的对象普通对象和函数对象都会有属性,指向创建它的构造函数的原型对象,比如上面的例子这就形成了原型链,会一直查找原型对象的属性,直到为。,保证原型链能够正常结束。 前言 一般谈到js中的继承的时候,一定会遇到原型,原型链的问题,原型里面又有prototype,__proto__,constructor属性,讲到这儿,很多同学是不是都一头雾水,傻傻分不清楚,因为工作中用到的地方...

    fuyi501 评论0 收藏0
  • 原型与原型链

    摘要:全局对象规定全局对象叫做,但是浏览器把作为全局对象浏览器先存在的。就是一个哈希表,里面含有很多属性。对象表示一个包含文档的窗口,其属性指向窗口中载入的文档。使用属性可以获取指定文档所在窗口。在标签浏览器比如中,每个标签具有自己的对象。 全局对象 ECMAScript规定全局对象叫做global,但是浏览器把window作为全局对象(浏览器先存在的)。window就是一个哈希表,里面含有...

    denson 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<