JavaScript原型链中函数和对象的理解

更新时间：2022年06月15日 09:33:22 作者：掘金安东尼

这篇文章主要为大家介绍了JavaScript原型链中函数和对象的理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

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原型链函数对象的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Flutter刷新组件RefreshIndicator自定义样式demo
这篇文章主要介绍了Flutter刷新组件RefreshIndicator自定义样式demo,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
微信小程序 wx.request(接口调用方式)详解及实例
这篇文章主要介绍了微信小程序 wx.request(接口调用方式)详解及实例的相关资料，wx.request请求方式比较简单,但是在使用的时候出现错,这里就记录下，需要的朋友可以参考下
2016-11-11
js前端表单数据处理表单数据校验
这篇文章主要为大家介绍了js前端表单数据处理表单数据校验示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
AntDesignPro使用electron构建桌面应用示例详解
这篇文章主要为大家介绍了AntDesignPro使用electron构建桌面应用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
JS前端使用canvas实现物体的点选示例
这篇文章主要为大家介绍了JS前端使用canvas实现物体的点选示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
JS轻量级函数式编程实现XDM三
这篇文章主要为大家介绍了JS轻量级函数式编程实现XDM示例详解第3/3篇，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
JS继承与工厂构造及原型设计模式详解
这篇文章主要为大家介绍了JS继承与工厂构造及原型设计模式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
JS实现将图片URL转base64示例详解
这篇文章主要为大家介绍了JS实现将图片URL转base64示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
微信小程序开发指南详解
这篇文章主要介绍了微信小程序开发指南详解的相关资料,需要的朋友可以参考下
2016-09-09
5种 JavaScript 方式实现数组扁平化
这篇文章主要介绍5种 JavaScript 方式实现数组扁平化，虽说只有5种方法，但是核心只有一个就是遍历数组arr，若arr[i]为数组则递归遍历，直至arr[i]不为数组然后与之前的结果concat。想具体了解的小伙伴那请看下面文章内容吧
2021-09-09