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 相关文章推荐
javascript hasFocus使用实例
Jun 29 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
简单实现js倒计时功能
Feb 13 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
微信小程序实现页面浮动导航
Jan 08 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
header()函数使用说明
2006/11/23 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
Python 字符串定义
2009/09/25 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
关于元旦的广播稿
2014/02/16 职场文书
优秀实习生感言
2014/03/01 职场文书
安踏广告词改编版
2014/03/21 职场文书
学生安全责任书
2014/04/15 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
海上钢琴师观后感
2015/06/03 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书