深入理解JavaScript中的__proto__属性与原型链

作者:闭包旅人

时间:2026-10-30

浏览:461

本文解析JavaScript中__proto__属性的作用及其在原型链中的核心地位。通过对比类与原型概念,阐述用户对象、构造函数及原型对象的关系,并结合代码示例说明__proto__如何指向原型,最终追溯至Object.prototype,帮助开发者理解JS对象继承机制。

文章目录

JavaScript对象与原型基础

JavaScript是一种面向对象的语言,其核心特性在于一切皆对象。

在Java等语言中,对象是通过类(Class)实例化生成的。通俗而言,类相当于一个模具,通过该模具可以制造出具体的实物,即对象。

然而,JavaScript中没有类的概念,而是采用“原型”机制。在JS中,“原型”并非模具,而是一个具体的对象实体。所有对象均由另一个对象衍生而来,这个被引用的源对象即为“原型对象”。

在javascript中有三类对象,1用户创建的对象,2构造函数的对象,3原型对象

  • 用户创建的对象通常通过new语句显式构造,或使用字面量方式生成。
  • 构造函数的对象是指通过普通构造函数(即使用new关键字调用的函数)所生成的对象。
  • 原型对象是指构造函数prototype属性所指向的那个具体对象。

__proto__属性与原型链机制

上述三类对象均具备一个__proto__属性,该属性指向当前对象的原型。沿着任一对象的__proto__属性向上遍历,最终均可追溯到Object.prototype。

所有构造函数都拥有prototype属性,该属性指向一个原型对象。当通过构造函数创建新对象时,新对象的__proto__属性将指向该构造函数的prototype属性。

原型对象包含一个constructor属性,该属性指回对应的构造函数,形成闭环。

代码示例与原型链验证

Talk is cheap, show me the code! 接下来通过代码示例进行验证:


var obj = {};
console.log(obj);

JavaScript对象与原型基础

展开__proto__属性后,可以看到其中包含一些默认提供的方法。

JavaScript对象与原型基础

值得注意的是,__proto__对象内部同样存在一个__proto__属性,这印证了前文所述:每个对象都通过__proto__指向其原型。我们可以打印该__proto__中的__proto__来验证:


console.log(obj.__proto__.__proto__); //--> null

输出结果为null,表明已到达原型链的顶层。由于obj是使用大括号{}定义的,其原型自然指向JavaScript的顶层对象。

为进一步加深理解,我们观察以下代码示例:


var parent = {
  name : "parent"
};
var child = {
  name : "child",
  __proto__ : parent
};
var subChild = {
  name : "subChild",
  __proto__ : child
}
console.log(subChild);

JavaScript对象与原型基础

  • subChild.__proto__ 指向 child
  • child.__proto__ 指向 parent
  • parent.__proto__ 指向顶层原型对象

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章