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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
推荐文章系统(一)
2006/10/09 PHP
php设计模式小结
2013/02/15 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
Javascript模块模式分析
2008/05/16 Javascript
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
Python 的类、继承和多态详解
2017/07/16 Python
python正则表达式面试题解答
2020/04/28 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Python实现多属性排序的方法
2018/12/05 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python cumsum函数的具体使用
2019/07/29 Python
python实现FTP循环上传文件
2020/03/20 Python
python GUI计算器的实现
2020/10/09 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
电子商务自荐书范文
2014/01/04 职场文书
自我评价的写作规则
2014/01/06 职场文书
服务承诺书格式
2014/05/21 职场文书
企业形象策划方案
2014/05/29 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书