深入理解JavaScript原型链与继承机制-js教程-PHP中文网

深入理解JavaScript原型链与继承机制

夜晨

发布： 2025-10-19 22:02:01

原创

1027人浏览过

JavaScript的继承基于原型链，每个对象通过[[Prototype]]链接到其原型，属性查找会沿链向上搜索。构造函数的prototype指向原型对象，实例的__proto__指向构造函数的prototype。继承可通过组合或寄生组合实现，ES6的class和extends语法更简洁，但底层仍依赖原型链。需注意原型修改影响所有实例，避免随意更改内置对象原型，并区分prototype与__proto__。

深入理解javascript原型链与继承机制

JavaScript 的对象继承机制与大多数面向对象语言不同，它基于原型（Prototype）而非类。理解原型链是掌握 JavaScript 面向对象编程的关键。下面从核心概念出发，逐步解析其工作原理和实际应用。

原型与构造函数的关系

每个函数在 JavaScript 中都有一个 prototype 属性，它指向一个对象，这个对象就是该函数作为构造函数时，其实例所共享的原型对象。当使用 new 操作符调用构造函数创建实例时，实例的内部 [[Prototype]]（通常可通过 __proto__ 访问）会指向构造函数的 prototype。

例如：

function Person(name) {
this.name = name;
}

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

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

这里，p.__proto__ === Person.prototype 为 true。方法 greet 并不在实例 p 自身上，而是通过原型链找到的。

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

原型链的查找机制

当你访问一个对象的属性或方法时，JavaScript 引擎首先检查该对象自身是否具有该属性。如果没有，就会沿着 [[Prototype]] 链向上查找，直到找到匹配的属性或到达原型链顶端（即 null）为止。

原型链的终点是 Object.prototype，它的 [[Prototype]] 是 null。所有普通对象都继承自它，因此具备诸如 toString、hasOwnProperty 等基础方法。

文心大模型

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

查看详情

举例说明链式结构：

此时，dog.__proto__ → Dog.prototype，而 Dog.prototype.__proto__ → Animal.prototype，形成一条链。调用 eat 时，引擎在 Dog.prototype 找不到，继续往上在 Animal.prototype 找到。

常见继承实现方式

ES6 之前，JavaScript 没有原生的 class extends 语法，开发者需手动模拟继承。以下是几种典型方式：

原型链继承：将子类的 prototype 设为父类的实例。缺点是所有实例共享引用类型属性。
构造函数借用（call/apply）：在子类构造函数中调用父类构造函数，可传递参数并隔离数据，但无法复用方法。
组合继承：结合前两者，最常用。既通过 call 继承属性，又通过原型链继承方法。
寄生组合继承：最优方案。使用 Object.create 避免重复调用父类构造函数，提升效率。

现代代码推荐使用 ES6 的 class 和 extends，底层仍基于原型链，但语法更清晰：

class Animal {
  constructor(name) { this.name = name; }
  eat() { console.log(this.name + " is eating."); }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  bark() { console.log("Woof!"); }
}

const d = new Dog("Max", "Lab");
d.eat(); // Max is eating.
d.bark(); // Woof!

注意事项与陷阱

使用原型链时需注意以下几点：

修改原型对象会影响所有继承它的实例，应避免在运行时随意更改原型，尤其在生产环境。
使用 for...in 循环遍历对象属性时，会包含原型链上的可枚举属性，可用 hasOwnProperty 过滤。
不要直接修改内置对象（如 Array、Object）的 prototype，可能导致兼容性问题或意外行为。
理解 __proto__ 与 prototype 的区别：prototype 是函数才有的属性；__proto__ 是每个对象的内部属性，指向其原型。