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


Posted in Javascript onJune 16, 2022

__ 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 相关文章推荐
jQuery与其它库冲突的解决方法
Jun 25 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 #Javascript
5个实用的JavaScript新特性
Jun 16 #Javascript
字节飞书面试promise.all实现示例
Jun 16 #Javascript
JS轻量级函数式编程实现XDM三
Jun 16 #Javascript
JS轻量级函数式编程实现XDM二
Jun 16 #Javascript
JS函数式编程实现XDM一
Jun 16 #Javascript
正则表达式基础与常用验证表达式
Jun 16 #Javascript
You might like
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
Python执行时间的计算方法小结
2017/03/17 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python实现堆排序的实例讲解
2020/02/21 Python
Python API len函数操作过程解析
2020/03/05 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
英语文学专业学生的自我评价
2013/10/31 职场文书
安全技术说明书
2014/05/09 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript