网站首页 > 技术文章 正文
__ proto__
最近在看高程4,原型链肯定是绕不过的,本瓜之前一直认为,只要记住这句话就可以了:
一个对象的隐式原型(__proto__)等于构造这个对象的构造函数的显式原型(prototype)
确实,所有对象都符合这句真理,在控制台打印一试便知:
const str = new String("123")
str.__proto__ === String.prototype // true
const arr = new Array(["123"])
arr.__proto__ === Array.prototype // true
const obj = new Object()
obj.__proto__ === Object.prototype // true
const bl = new Boolean(false)
bl.__proto__ === Boolean.prototype // true
......
const fn = function(){}
fn.__proto__ === Function.prototype // true
复制代码
虽然我们平常都会像以下这样写居多,声明方式不一样,但结果不变:
const str = '123'
str.__proto__ === String.prototype // true
const arr = [123]
arr.__proto__ === Array.prototype // true
const obj = {}
obj.__proto__ === Object.prototype // true
const bl = false
bl.__proto__ === Boolean.prototype // true
......
const fn = new Function()
fn.__proto__ === Function.prototype // true
复制代码
顺着这个思路,那我们接着在构造函数上,继续用 __proto__ 寻找,可以得到:
String.__proto__=== Function.prototype // true
Array.__proto__=== Function.prototype // true
Boolean.__proto__=== Function.prototype // true
Object.__proto__=== Function.prototype // true
Function.__proto__=== Function.prototype // true
复制代码
这些基本构造函数(String、Array、Boolean、Object 等),都是用 Function 来构造生成的!!
还能用 __proto__ 继续向上找吗? 不能了,因为结果会是一直重复下面这一行代码:
Function.__proto__ === Function.prototype
复制代码
所以,不管你怎样通 __proto__ 隐式原型向上找,最终都只能找到 Function,而 Function 的隐式原型等于它的显式原型;
prototype.__ proto__
但是这与我们所知不符呀,不是万物皆对象吗??
我们尝试再用 __proto__ 向前探一步,发现:
Function.__proto__.__proto__ === Object.prototype // true
Function.__proto__ === Function.prototype // true
Function.prototype.__proto__ === Object.prototype // true
复制代码
Function 这个终极构造函数,通过查找显式原型的隐式原型,竟然等于 Object 的显式原型!
其实,其它构造函数也一样,都能找到 Object:
String.prototype.__proto__=== Object.prototype // true
Array.prototype.__proto__=== Object.prototype // true
Boolean.prototype.__proto__=== Object.prototype // true
Object.prototype.__proto__=== Object.prototype // true
复制代码
所有构造函数的显式原型的隐式原型 等于 Object 的显式原型!!
理解
为什么要这样设定呢??
为什么对象只用 .__proto__ 向上查找,最终只能找到 Function?
为什么构造函数用 .prototype.__proto__ 向上查找,能找到 Object ?
这样原型链查找不是有两套逻辑吗?
后来,本瓜歪理解:
【Function】就好像是创造万物的上帝,它创造了:各种各样的物质【对象】,物质又分化为:人【字符串】、鱼【数组】、鸟【布尔】、兽【数值】、石头【Date】、花草【正则】等等分类;
这些不同种类的物质,再一代一代延续(繁衍)下去。。。。。。
问:这些种类,它们子孙或后代们的特性【属性】是来源于哪里呢??
可以从它们的祖先那里继承而来,这一点没毛病,生物 DNA 遗传,龙生龙、凤生凤,老鼠儿子会打洞
let Mouse = function(){
this.makeAHole = true
}
let m1 = new Mouse()
m1.makeAHole // true
m1.__proto__.makeAHole === Mouse.prototype.makeAHole // true
复制代码
或者还可以从【物质】这个原始分类而来, 因为人鱼鸟兽、花草树木、石头都还是属于“物质”,比如都有碳元素,就像字符串、数组、布尔、数值都是属于“对象”,都有 toString 方法;
Object.prototype.carbon = true
let p1 = 'man'
p1.carbon // true
p1.__proto__.__proto__.carbon === Object.prototype.carbon// true
复制代码
对象 Object(物质)是由函数 Function(上帝)创造的,没毛病。
上帝(Function)也是一种物质(Object),一切都是物质(Object),物质(Object)起源于大爆炸,起源于空(null),也没毛病。
再来看这张经典的图:
按照咱们“理解”也画一个:
哈哈哈,害行,这次就先理解到这吧。
OK,以上便是本篇分享。 觉得不错点个赞吧,您的鼓励,我的动力,坚持原创质量好文~~ 欢迎评论留言 我是掘金安东尼,输出暴露输入,技术洞见生活。再会吧~~
猜你喜欢
- 2024-11-10 JavaScript-原型链 javascript 原型,原型链 ? 有什么特点?
- 2024-11-10 javascript原型链 js原型链的用处
- 2024-11-10 js 原型/原型链/构造函数/实例/继承
- 2024-11-10 【JavaScript 高级】深入了解原型链
- 2024-11-10 快速读懂JavaScript中的原型链 js的原型和原型链是什么
- 2024-11-10 你可能不太理解的JavaScript - 原型与原型链
- 2024-11-10 我在jacascript中学习到的那些原型链,你知道吗?
- 2024-11-10 JavaScript中的原型prototype和__proto__的区别及原型链概念
- 2024-11-10 面试问题分享 - 5:解释一下 原型、构造函、实例、原型链 之间的关系
- 2024-11-10 JavaScript:原型和原型链 js原型和原型链作用
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-