JavaScript 中的原型链与继承

news2025/4/4 20:45:32

JavaScript 是一种基于原型的编程语言，这意味着它的对象继承是通过原型链而非类的机制来实现的。原型链是 JavaScript 中对象与对象之间继承属性和方法的基础。本文将深入探讨 JavaScript 中的原型链和继承机制，帮助你理解这一重要概念。

一、原型（Prototype）的概念

在 JavaScript 中，每个对象都有一个内置属性 [[Prototype]]，通常我们通过 __proto__ 或者 Object.getPrototypeOf() 来访问它。这个原型对象本身也是一个对象，并且它也有自己的原型。通过这种方式，JavaScript 实现了对象之间的继承。

每个 JavaScript 对象都直接继承自一个原型对象，而这个原型对象又可以有自己的原型。这种层级关系被称为 原型链。

二、原型链的工作原理

原型链的工作原理可以通过以下步骤来理解：

对象的原型：每个对象都可以通过 Object.getPrototypeOf(obj) 或者 obj.__proto__ 来访问其原型。
查找属性和方法：当我们访问对象的属性或方法时，JavaScript 引擎会首先检查该对象是否有该属性。如果对象自身没有该属性，它会查找对象的原型，如果原型没有，它会继续查找原型的原型，这一过程会一直向上查找，直到找到该属性或者到达原型链的顶端（null）。
```
let animal = {
    species: "Dog",
    speak: function() {
        console.log(this.species + " barks!");
    }
};

let dog = Object.create(animal);
dog.species = "Beagle";

dog.speak();  // 输出 "Beagle barks!"
```
在上面的代码中，dog 对象没有 speak 方法和 species 属性，但它通过原型链继承了 animal 对象的 speak 方法和 species 属性。当我们访问 dog.speak() 时，JavaScript 引擎首先在 dog 对象本身查找，没找到就到 animal 对象上去找。

三、构造函数与原型链

JavaScript 中的对象通常是通过构造函数来创建的，而构造函数本身也是一个函数对象，每个构造函数都有一个 prototype 属性，这个属性指向构造函数的原型对象。

当通过构造函数创建一个实例时，这个实例会自动继承构造函数原型上的属性和方法。让我们来看一个例子：

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

Animal.prototype.speak = function() {
    console.log(this.name + ' makes a noise');
};

let dog = new Animal('Buddy');
dog.speak();  // 输出 "Buddy makes a noise"

在这段代码中，Animal 是一个构造函数，我们通过 new Animal() 创建了一个 dog 实例。dog 实例的原型指向 Animal.prototype，因此它能够访问 Animal.prototype 上的 speak 方法。

四、继承的实现

在 JavaScript 中，继承并不像其他面向对象编程语言那样通过类的继承来实现，而是通过原型链来实现的。JavaScript 提供了多种方式来实现继承，常见的有以下几种：

1. 通过构造函数实现继承

通过调用父类构造函数和修改子类的原型，可以实现继承。

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

Animal.prototype.speak = function() {
    console.log(this.name + ' makes a noise');
};

function Dog(name) {
    Animal.call(this, name);  // 继承父类的属性
}

Dog.prototype = Object.create(Animal.prototype);  // 继承父类的方法
Dog.prototype.constructor = Dog;  // 修正构造函数指向

let dog = new Dog('Buddy');
dog.speak();  // 输出 "Buddy makes a noise"

在上面的代码中，我们使用 Animal.call(this, name) 来调用父类的构造函数，从而继承了父类的属性。然后，我们将 Dog.prototype 设置为 Object.create(Animal.prototype)，这样 Dog 就继承了 Animal 的方法。

2. 通过 ES6 的 `class` 语法实现继承

ES6 引入了类的语法，使得继承更加直观和易于使用。通过 extends 关键字，我们可以更轻松地实现继承

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

    speak() {
        console.log(this.name + ' makes a noise');
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);  // 调用父类构造函数
    }
}

let dog = new Dog('Buddy');
dog.speak();  // 输出 "Buddy makes a noise"

在 ES6 的 class 语法中，我们使用 extends 来继承父类，并通过 super() 来调用父类的构造函数。ES6 的 class 语法实际上是对传统 JavaScript 原型链继承的一种封装。