JavaScript 原型链：理解原型继承与属性查找机制

JavaScript通过原型链实现继承，对象属性查找会沿原型链向上搜索。每个构造函数有prototype指向原型对象，实例通过__proto__链接到原型，共享其属性和方法。例如Person构造函数的原型添加greet方法，其实例john可调用该方法，实际访问的是Person.prototype中的定义。属性查找顺序为：先实例自身，再逐级向上遍历原型链，直至Object.prototype或null结束。修改原型会影响所有实例，体现动态性；但实例添加同名属性会屏蔽原型属性。ES6的class是语法糖，底层仍基于原型，可用Object.create()、Object.setPrototypeOf()等操作原型链。原型链本质是由__proto__连接的对象链，属性查找机制构成JavaScript继承核心。

JavaScript 的对象继承机制基于原型链，而不是像 Java 或 C++ 那样使用类继承。理解原型链是掌握 JavaScript 面向对象编程的关键。当你访问一个对象的属性时，JavaScript 引擎会先在该对象自身查找，如果找不到，就会沿着原型链向上查找，直到找到属性或到达原型链末端（null）为止。

原型与构造函数的关系

每个函数在 JavaScript 中都有一个 prototype 属性，这个属性指向一个对象，即“原型对象”。当用构造函数创建实例时，实例的内部会连接到该原型对象。

例如：

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log("Hello, I'm " + this.name);
};

const john = new Person("John");
john.greet(); // 输出: Hello, I'm John

这里，john 是 Person 的实例，它本身没有 greet 方法，但能调用该方法，是因为 JavaScript 在 john.__proto__（即 Person.prototype）中找到了它。

立即学习“Java免费学习笔记（深入）”；

属性查找机制：沿原型链向上搜索

当你访问对象的一个属性时，JavaScript 执行以下步骤：

• 先检查对象自身是否拥有该属性（通过 Object.hasOwn() 或 in 操作符可判断）
• 如果没有，就查找其原型（__proto__ 或 Object.getPrototypeOf(obj)）
• 如果原型中也没有，继续查找原型的原型，形成一条链
• 直到某一步原型为 null，查找结束，返回 undefined

例如：

console.log(john.toString()); // 调用的是 Object.prototype.toString

john 没有 toString，Person.prototype 也没有，但它继承自 Object.prototype，所以能找到该方法。原型链结构如下：

john → Person.prototype → Object.prototype → null

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

56

查看详情

修改原型会影响所有实例

因为所有实例共享同一个原型对象，修改原型会动态反映到所有实例上。

比如：

Person.prototype.age = 25;
console.log(john.age); // 25

即使实例是在修改前创建的，也能访问新增属性。这体现了原型的动态性。

但要注意：给实例添加同名属性会屏蔽原型中的属性，不会修改原型。

john.greet = function() { console.log("Hi!"); };
john.greet(); // Hi! （不再访问原型）

现代语法中的原型操作

ES6 提供了更清晰的操作方式：

• class 语法只是语法糖，底层仍是原型
• Object.create(proto) 可直接指定原型创建对象
• Object.setPrototypeOf() 和 Object.getPrototypeOf() 安全读写原型

例如：

const animal = { eats: true };
const rabbit = Object.create(animal);
console.log(rabbit.eats); // true
console.log(Object.getPrototypeOf(rabbit) === animal); // true

基本上就这些。原型链本质是一条由 __proto__ 连接的对象链条，属性查找就是从当前对象一步步往上找的过程。掌握这一点，就能理解 JavaScript 继承的核心逻辑。不复杂但容易忽略细节。

以上就是JavaScript 原型链：理解原型继承与属性查找机制的详细内容，更多请关注php中文网其它相关文章！