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 相关文章推荐
JS打开新窗口的2种方式
Apr 18 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
Vue触发input选取文件点击事件操作
Aug 07 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
文本链接逐个出现的js脚本
2007/12/12 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
js更优雅的兼容
2010/08/12 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
解决vue props 拿不到值的问题
2018/09/11 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
Python入门篇之列表和元组
2014/10/17 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
保卫钓鱼岛口号
2014/06/20 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
庆祝教师节标语
2014/10/09 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
婚宴新娘致辞
2015/07/28 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
小学数学教学随笔
2015/08/14 职场文书