JavaScript原型链与继承机制研究-js教程-PHP中文网

JavaScript原型链与继承机制研究

狼影

发布： 2025-10-17 10:17:02

原创

507人浏览过

JavaScript继承基于原型链，通过构造函数和prototype实现。原型链查找属性时逐级向上追溯，直至null。常见继承方式包括原型链继承、构造函数继承、组合继承及寄生组合继承，其中寄生组合继承为最佳实践。ES6的class与extends是语法糖，底层仍依赖原型机制，使代码更简洁但本质不变。

javascript原型链与继承机制研究

JavaScript 的对象继承机制不同于传统的面向对象语言，它基于原型（Prototype）而非类。理解原型链和继承方式，是掌握 JavaScript 面向对象编程的关键。

原型与原型链的基本概念

在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性指向一个对象，即该函数的原型对象。当使用构造函数创建实例时，实例的内部会链接到构造函数的 prototype 对象，这种链接关系通过 __proto__（现已不推荐直接使用，但有助于理解）体现。

查找属性时，JavaScript 引擎首先检查对象自身是否有该属性，如果没有，就沿着 [[Prototype]] 链向上查找，直到找到匹配属性或到达原型链顶端（即 null）。这条查找路径就是原型链。

例如：

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

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

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

这里 p1 自身没有 sayHello 方法，但它能调用，是因为 JavaScript 沿着原型链找到了 Person.prototype 上的方法。

常见的继承实现方式

JavaScript 提供了多种实现继承的方式，每种都有其适用场景和局限性。

1. 原型链继承

将子类型的原型设置为父类型的一个实例。

缺点：所有子类实例共享父类实例的属性，若属性是引用类型，会导致互相影响。

2. 构造函数继承（经典继承）

在子类构造函数中调用父类构造函数，使用 call 或 apply 改变 this 指向。

豆包大模型

字节跳动自主研发的一系列大型语言模型

834

查看详情

function Animal(name) {
  this.name = name;
  this.colors = ["red", "blue"];
}

function Dog(name, age) {
  Animal.call(this, name); // 继承属性
  this.age = age;
}

const dog1 = new Dog("Max", 3);
const dog2 = new Dog("Lucy", 2);
dog1.colors.push("green");
console.log(dog2.colors); // ["red", "blue"]，不受影响

优点：可传参，避免引用类型共享。缺点：无法继承父类原型上的方法。

3. 组合继承（最常用）

结合原型链和构造函数继承，既继承原型方法，又保证实例有独立属性。

虽然有效，但父类构造函数被调用了两次，存在性能浪费。

4. 寄生组合继承（最佳实践）

通过 Object.create() 创建干净的中间原型，避免重复调用父类构造函数。

这种方式高效且语义清晰，是现代 JavaScript 继承的推荐写法。

ES6 类与继承的语法糖

ES6 引入了 class 和 extends 关键字，使继承写法更接近传统语言，但底层仍是基于原型。

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

class Dog extends Animal {
  constructor(name, age) {
    super(name); // 调用父类构造函数
    this.age = age;
  }
  bark() {
    console.log("Woof!");
  }
}

const dog = new Dog("Rex", 4);
dog.eat(); // Rex is eating.
dog.bark(); // Woof!

class 并没有引入新的继承模型，只是对原型继承的语法封装，更简洁易读。

基本上就这些。理解原型链的本质，才能真正掌握 JavaScript 的对象机制。即使使用 class 语法，背后的原理依然依赖原型和构造函数。

以上就是JavaScript原型链与继承机制研究的详细内容，更多请关注php中文网其它相关文章！