Lazy loaded image
技术分享
带你搞懂 JavaScript 中的原型和原型链
字数 655阅读时长≈ 2 分钟
2021-6-5
2025-5-10
type
status
date
slug
summary
tags
category
icon
password

带你搞懂 JavaScript 中的原型和原型链

原型和原型链是 JavaScript 中非常核心但也经常让人感到困惑的部分。本文将用通俗易懂的语言，带你一步一步搞清楚它们的本质，并配上图示加深理解。

一、什么是原型（[[Prototype]] 或 __proto__）

在 JavaScript 中，每一个对象都有一个内部属性 [[Prototype]]，它指向另一个对象，这个对象被称为它的原型。
我们可以通过 __proto__ 访问到这个原型对象（注意：__proto__ 不是标准，但大多数浏览器都支持），或者使用标准方法 Object.getPrototypeOf(obj)。

二、什么是构造函数和 prototype

构造函数是用来创建对象的函数。每一个函数（包括构造函数）在创建时，都会有一个 prototype 属性，它也是一个对象，用于为通过该构造函数创建的对象提供共享属性和方法。
此时：
  • p1.__proto__ === Person.prototype 为 true
  • Person.prototype.constructor === Person 为 true

图示：构造函数和原型的关系

三、原型链是什么？

当我们访问一个对象的属性时，如果对象本身没有这个属性，会沿着它的原型对象继续查找，这种一层层的查找结构被称为原型链。
举个例子：
这是因为：
  • p1 没有 toString
  • 它的原型 Person.prototype 也没有
  • 最终在 Object.prototype 中找到了 toString

图示：原型链结构

原型链的尽头是 null，它表示不再有原型了。

四、Object.create() 和原型继承

有时候我们并不想用构造函数来创建对象，而是直接指定原型：
这种方式可以更灵活地控制原型链结构。

五、总结

  • 每个对象都有 __proto__，指向它的原型
  • 构造函数有 prototype，用于给其实例提供共享属性
  • 原型链是多个对象通过原型连接起来的一条查找链
  • JavaScript 会自动沿着原型链查找属性和方法
上一篇
彻底理解 Promise / async
下一篇
Everything 文件搜索软件推荐
目录