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 setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
js 实现验证码输入框示例详解
Sep 23 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
我的论坛源代码(一)
2006/10/09 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
vue-router传参用法详解
2019/01/19 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python os模块介绍
2014/11/30 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
对pandas中apply函数的用法详解
2018/04/10 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
应届毕业生求职信范文
2013/12/18 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
证婚人致辞精选
2015/07/28 职场文书
写给同事的离职感言
2015/08/04 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android