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字符串处理实例代码
Aug 05 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
Vue实现开关按钮拖拽效果
Sep 22 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 正则表达式小结
2009/08/31 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
Python实现的计数排序算法示例
2017/11/29 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
python批量处理文件或文件夹
2020/07/28 Python
Django设置Postgresql的操作
2020/05/14 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
招商经理岗位职责
2013/11/16 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
老公保证书范文
2014/04/29 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
商务代表岗位职责
2015/02/15 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js
MySQL批量更新不同表中的数据
2022/05/11 MySQL