JavaScript原型链中函数和对象的理解

 更新时间:2022年06月15日 09:33:22   作者:掘金安东尼  
这篇文章主要为大家介绍了JavaScript原型链中函数和对象的理解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

__ 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】、花草【正则】等等分类;

这些不同种类的物质,再一代一代延续(繁衍)下去。。。。。。

问:这些种类,它们子孙或后代们的特性【属性】是来源于哪里呢??

1.可以从它们的祖先那里继承而来,这一点没毛病,生物 DNA 遗传,龙生龙、凤生凤,老鼠儿子会打洞

let Mouse = function(){
	this.makeAHole = true
}
let m1 = new Mouse()
m1.makeAHole // true
m1.__proto__.makeAHole === Mouse.prototype.makeAHole // true

2.或者还可以从【物质】这个原始分类而来, 因为人鱼鸟兽、花草树木、石头都还是属于“物质”,比如都有碳元素,就像字符串、数组、布尔、数值都是属于“对象”,都有 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),也没毛病。

再来看这张经典的图:

按照咱们“理解”也画一个:

哈哈哈,害行,这次就先理解到这吧,更多关于JavaScript原型链函数对象的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript 反射学习技巧

    JavaScript 反射学习技巧

    这篇文章主要给大家分享的是JavaScript 的反射学习技巧,主要是区别在于所有的函数对象属性过于复杂,而且额外增加可能会导致程序行为不合理,所以扩展 Reflect 函数来专门对函数对象处理调用方法,构造对象,获取或者设置属性等相关操作。下面一起进入文章内容吧
    2021-10-10
  • javascript对象3个属性特征

    javascript对象3个属性特征

    这篇文章主要介绍了javascript对象3个属性特征,writable可写、enumerable可枚举、configurable可配置,下面来看看文章的详细内容吧
    2021-11-11
  • 微信小程序联网请求的轮播图

    微信小程序联网请求的轮播图

    这篇文章主要介绍了微信小程序联网请求的轮播图的相关资料,需要的朋友可以参考下
    2017-07-07
  • 微信小程序网络请求wx.request详解及实例

    微信小程序网络请求wx.request详解及实例

    这篇文章主要介绍了微信小程序网络请求wx.request详解及实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • 前端使用xlsx库导出带有样式的excel文件

    前端使用xlsx库导出带有样式的excel文件

    这篇文章主要为大家介绍了前端使用xlsx库导出带有样式的excel文件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序 MINA文件结构

    微信小程序 MINA文件结构

    这篇文章主要介绍了微信小程序 MINA文件结构的相关资料,这里详细介绍了微信小程序的文件目录及文件作用,需要的朋友可以参考下
    2016-10-10
  • JS前端canvas交互实现拖拽旋转及缩放示例

    JS前端canvas交互实现拖拽旋转及缩放示例

    这篇文章主要为大家介绍了JS前端canvas交互实现拖拽旋转及缩放示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 前端框架arco table源码遇到的问题解析

    前端框架arco table源码遇到的问题解析

    这篇文章主要为大家介绍了前端框架arco table源码遇到的问题解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • JavaScript中的宏任务和微任务详情

    JavaScript中的宏任务和微任务详情

    这篇文章主要介绍了JavaScript中的宏任务和微任务,下面文章围绕JavaScript宏任务和微任务相关资料展开详细内容,需要的朋友可以参考一下,希望对大家有所帮助
    2021-11-11
  • 新闻内页-JS分页

    新闻内页-JS分页

    新闻内页-JS分页...
    2006-06-06

最新评论