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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
js遍历td tr等html元素
Dec 13 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
jquery each()源代码
2011/02/14 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
JS实现拼图游戏
2021/01/29 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
在Python中表示一个对象的方法
2019/06/25 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
怎样自定义一个异常类
2016/09/27 面试题
主管职责范文
2013/11/09 职场文书
数控专业推荐信范文
2013/12/02 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
责任书格式范文
2014/07/28 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫