【JavaScript】原型继承详解

JavaScript 中的原型继承是其独特的继承机制。原型链允许对象从其他对象继承属性和方法，使代码更具复用性与灵活性。本文将详细介绍 JavaScript 中的原型继承，帮助你更好地理解其核心概念及应用场景。

一、原型继承概述

1. 什么是原型继承？

在面向对象编程中，继承是一个对象可以从另一个对象获得属性和方法的机制。JavaScript 使用原型继承而非类继承，每个对象都有一个隐式关联的原型对象（通过 __proto__ 引用），并且可以访问该原型对象的属性和方法。

2. 原型链的工作原理

每个 JavaScript 对象都有一个属性，指向其构造函数的原型对象。这个构造函数的原型对象本身也可能有原型，从而形成一个链式结构，称为原型链。当访问对象的某个属性或方法时，JavaScript 引擎会先在对象本身查找，如果未找到，会沿着原型链向上查找，直到找到该属性或到达 null 结束。

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
alice.greet();  // 输出：Hello, my name is Alice

在上述代码中，alice 对象没有 greet 方法，但它可以通过其构造函数 Person 的原型对象访问该方法。这就是原型链的工作机制。

二、构造函数与原型

1. 构造函数的定义

构造函数是 JavaScript 中用于创建对象的函数。通过使用 new 关键字，可以调用构造函数并创建新的对象实例。每个构造函数都会自动拥有一个 prototype 属性，指向一个包含所有实例共享属性和方法的对象。

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

Animal.prototype.getType = function() {
  return this.type;
};

const dog = new Animal('Dog');
console.log(dog.getType());  // 输出：Dog

在这个例子中，Animal 是一个构造函数，dog 是 Animal 的实例，通过原型链可以访问 getType 方法。

2. prototype 与 proto 的区别

• prototype 是构造函数的属性，指向该构造函数的原型对象。
• __proto__ 是每个实例对象的属性，指向其构造函数的原型对象。

二者之间的区别在于，prototype 是构造函数独有的，而 __proto__ 存在于实例对象中，且它指向的是构造函数的原型。

console.log(dog.__proto__ === Animal.prototype);  // 输出：true

三、原型链中的继承

1. 通过原型链实现继承

原型链继承是 JavaScript 实现对象继承的核心机制。通过将一个对象的原型设置为另一个对象的实例，可以让前者继承后者的属性和方法。

function Mammal() {
  this.hasHair = true;
}

Mammal.prototype.breath = function() {
  console.log('Breathing...');
};

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

Cat.prototype = new Mammal();

const kitty = new Cat('Kitty');
console.log(kitty.hasHair);  // 输出：true
kitty.breath();  // 输出：Breathing...

在这个例子中，Cat 通过 Mammal 继承了 hasHair 属性和 breath 方法。通过将 Cat 的原型设置为 Mammal 的实例，kitty 对象可以访问 Mammal 的属性和方法。

2. 使用 Object.create() 实现继承

Object.create() 是一个现代化的继承方法，它允许开发者创建一个新对象，并显式地将其原型设置为指定的对象。相比直接设置构造函数的原型，Object.create() 提供了更干净的继承方式。

const animal = {
  hasFur: true,
  makeSound: function() {
    console.log('Some sound...');
  }
};

const lion = Object.create(animal);
lion.makeSound();  // 输出：Some sound...
console.log(lion.hasFur);  // 输出：true

在这个例子中，lion 对象通过 Object.create() 继承了 animal 的属性和方法。

四、ES6 中的类继承

1. ES6 的 class 语法

在 ES6 中，JavaScript 引入了 class 关键字，使得继承和对象创建的语法更加类似传统面向对象语言。然而，class 实际上只是原型继承的语法糖，本质上仍然基于原型链。

class Vehicle {
  constructor(type) {
    this.type = type;
  }

  start() {
    console.log(`${this.type} is starting...`);
  }
}

class Car extends Vehicle {
  constructor(type, brand) {
    super(type);
    this.brand = brand;
  }

  drive() {
    console.log(`${this.brand} car is driving...`);
  }
}

const myCar = new Car('Car', 'Toyota');
myCar.start();  // 输出：Car is starting...
myCar.drive();  // 输出：Toyota car is driving...

在这个例子中，Car 类继承了 Vehicle 类，通过 super 调用了父类的构造函数，并且 myCar 对象可以访问父类的 start 方法。

2. class 的本质

虽然 ES6 提供了 class 语法，但其本质依然是基于原型的继承机制。class 中的方法被定义在原型对象上，实例对象通过原型链访问这些方法。

console.log(Car.prototype.constructor === Car);  // 输出：true

五、常见的继承问题及解决方案

1. 原型链继承的问题

原型链继承的主要问题在于，所有实例共享同一个原型对象的引用属性。这意味着当一个实例修改引用属性时，其他实例也会受到影响。

function Person() {
  this.friends = ['Alice', 'Bob'];
}

const person1 = new Person();
const person2 = new Person();

person1.friends.push('Charlie');
console.log(person2.friends);  // 输出：[ 'Alice', 'Bob', 'Charlie' ]

2. 组合继承的解决方案

组合继承结合了原型链继承和构造函数继承的优点。通过在子类构造函数中调用父类构造函数，并将子类的原型设置为父类的实例，可以避免共享引用属性的问题。

function Parent(name) {
  this.name = name;
  this.friends = ['Alice', 'Bob'];
}

Parent.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

function Child(name, age) {
  Parent.call(this, name);  // 构造函数继承
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype);  // 原型链继承
Child.prototype.constructor = Child;

const child1 = new Child('Tom', 10);
child1.friends.push('Charlie');
console.log(child1.friends);  // 输出：['Alice', 'Bob', 'Charlie']

const child2 = new Child('Jerry', 8);
console.log(child2.friends);  // 输出：['Alice', 'Bob']

六、总结

JavaScript 的原型继承机制通过原型链实现对象之间的属性和方法共享。通过构造函数、Object.create() 和 ES6 的 class 语法，开发者可以灵活地实现继承。理解原型链、原型对象以及常见的继承模式，是掌握 JavaScript 面向对象编程的关键。

推荐：

• JavaScript
• react
• vue

---