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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python进行数据提取的方法总结
2016/08/22 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
Linux如何压缩可执行文件
2013/10/21 面试题
某科技软件测试面试题
2013/05/19 面试题
临床医师专业个人自我评价
2014/01/08 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
特岗教师个人总结
2015/02/10 职场文书
商务宴会祝酒词
2015/08/11 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB