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__

相关推荐
慕斯策划一场流浪2 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
LaoZhangAI23 分钟前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
hepherd42 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI42 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见43 分钟前
浅拷贝与深拷贝
前端
梅子酱~1 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
前端飞天猪1 小时前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡1 小时前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克1 小时前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
你的人类朋友1 小时前
JS严格模式,启动!
javascript·后端·node.js