JavaScript原型链:探寻对象之间的继承秘密

原型

构造函数

什么是构造函数呢?简单来说,当函数用于创建实例对象(new)时,这个函数便称之为构造函数。

prototype

在JavaScript中,每一个非箭头函数都有一个prototype属性(也是一个对象),里面存放着通过该函数创建的实例对象会继承共享的一些属性和方法,也就是我们所说的原型对象。

不好理解? 举个栗子:

javascript 复制代码
function Test() {}
Test.prototype.a = 1 // Test对象原型上面的属性
// 创建了两个实例对象
const test1 = new Test();
const test2 = new Test();
// 这两个实例对象都可以访问
console.log(test1.a); // 1
console.log(test2.a); // 1

Test函数中有一个prototype属性,我们在其身上添加一个属性a,值为1,显然这个函数创建的示例对象test1test2都能够访问这个属性,所以称函数原型对象里面的属性和方法是通过该函数创建的实例对象共享的属性和方法。

constructor

在函数的原型对象中有这么一个属性--constructor,它会指向该函数。先来看看下面的代码

javascript 复制代码
function Test() {}
const test = new Test();
console.log(Test.prototype.constructor); // ƒ Test() {}
console.log(test.constructor) // ƒ Test() {}

我们发现这两个打印结果都相同,第一个打印Test构造函数我们都能理解,因为上面我们也说了,Test函数的原型对象上的constructor会指向该函数,即Test。那么第二个打印结果为什么也是这个呢?我们说过,构造函数创建的实例对象会继承和共享原型对象上的属性和方法,那么constructor自然也就被test继承了。

原型链

__proto__

在JavaScript中,对象都有一个__proto__属性,它也是一个对象。有了这个之后呢,我们还得知道这么一个关系,对象的__proto__保存着该对象构造函数的prototype

csharp 复制代码
function Test() {}
const test = new Test()

我们知道,test对象的__proto__保存着构造函数Testprototype

ini 复制代码
console.log(test.__proto__ === Test.prototype) // true

我们又知道prototype也是一个对象,那么它也会有自己的__proto__属性, 那么Test.prototype.__proto__会等于什么呢,Test.prototype是一个对象,对象的构造函数自然是Object。也可以通过constructor来获取该对象构造函数是什么

javascript 复制代码
console.log(Test.prototype.constructor) // Object
console.log(Test.prototype.__proto__ === Object.prototype) // true

那么Object.prototype.__proto__又会是什么呢。我们来看一下

javascript 复制代码
console.log(Object.prototype.__proto__) // null

null,相信到了这里,大家对于原型链都有了一个概念,其实就是以__proto__为连接点,以prototype为节点形成的链状结构,而原型链的顶端便是null

Funnction 和 Object

Function

我们知道,在JavaScript中函数也是一个对象,那么上面实例中的构造函数Test也是一个对象,那么它是由谁构造出来的呢,答案是Function

vbnet 复制代码
// function Test() {} 相当于 const Test = new Function(

既然如此的话,那么Test也会由自己的__proto__咯,它会等于什么呢,相信大家心里已经有了答案,没错,它就等于Function.prototype

javascript 复制代码
console.log(Test.__proto__ === Function.prototype) // true

更有意思的来了,我们知道Function是一个函数,显然也是一个对象,那么它的__proto__会是什么呢?

javascript 复制代码
console.log(Function.__proto__ === Function.prototype) // true

为什么呢? 没有为什么,这就是底层规定的。

Object

Object实际上也是一个构造函数,那么它应该也是由Function构造而来对吧,那么我们可以得出什么呢?

javascript 复制代码
console.log(Object.__proto__ === Function.prototype)

综上:

  1. Function.__proto__ === Function.prototype
  2. Object.__proto__ === Function.prototype

推论:Object.__proto__ === Function.__proto__

相关推荐
li35742 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj3 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel3 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel3 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
^Rocky4 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵4 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld4 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记4 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
东风西巷6 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求