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

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

狼影

发布： 2025-11-18 19:56:02

原创

392人浏览过

JavaScript继承基于原型链，通过prototype和__proto__实现属性查找与继承，常见方式包括原型链继承、构造函数借用、组合继承及ES6 class继承，其中class为语法糖，底层仍依赖原型机制。

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

JavaScript 的继承机制与传统的面向对象语言（如 Java 或 C++）不同，它基于原型链（Prototype Chain）实现。理解原型链是掌握 JavaScript 面向对象编程的关键。

原型与构造函数的关系

在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性指向一个对象，称为“原型对象”。当你用 new 操作符调用一个函数作为构造函数时，新创建的实例会从构造函数的 prototype 对象上继承属性和方法。

例如：

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

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

登录后复制

这里，alice 虽然没有直接定义 greet 方法，但它能访问该方法，因为 JavaScript 在查找属性时会沿着原型链向上搜索。

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

原型链的查找机制

当你访问一个对象的属性或方法时，JavaScript 引擎首先检查该对象自身是否有这个属性。如果没有，就会去它的 __proto__（即构造函数的 prototype）上查找。如果还没找到，就继续查找该原型对象的 __proto__，直到找到为止，或者到达原型链的末端——Object.prototype，其 __proto__ 为 null。

这个逐层向上查找的过程就是原型链的核心机制。

例如：

console.log(alice.toString()); // 来自 Object.prototype

登录后复制

toString 并不在 Person.prototype 上，但 alice 可以调用它，因为它最终继承自 Object.prototype。

实现继承的常见方式

JavaScript 提供了多种实现继承的方法，最基础的是通过原型链。

1. 原型链继承：将子类的 prototype 指向父类的一个实例。

可图大模型

可图大模型（Kolors）是快手大模型团队自研打造的文生图AI大模型

110

查看详情

function Animal() { this.type = "animal"; }
Animal.prototype.eat = function() { console.log("Eating..."); };

function Dog() { this.breed = "dog"; }
Dog.prototype = new Animal(); // 继承 Animal

const myDog = new Dog();
myDog.eat(); // Eating...
console.log(myDog.type); // animal

登录后复制

这种方式的问题是所有子类实例共享父类的实例属性，可能导致数据污染。

2. 构造函数借用（经典继承）：在子类构造函数中调用父类构造函数。

function Dog(name) {
  Animal.call(this); // 借用构造函数
  this.name = name;
}

登录后复制

这样可以保证实例间不共享属性，但无法继承父类原型上的方法。

3. 组合继承（最常用）：结合原型链和构造函数借用。

function Dog(name) {
  Animal.call(this);
  this.name = name;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

登录后复制

既保证了属性独立，又实现了方法复用。

4. ES6 class 继承：语法更清晰，底层仍是原型链。

class Animal {
  constructor() { this.type = "animal"; }
  eat() { console.log("Eating..."); }
}

class Dog extends Animal {
  constructor(name) {
    super();
    this.name = name;
  }
}

登录后复制

本质是上述组合继承的语法糖，可读性更好。