JavaScript对象继承

JavaScript对象继承是面向对象编程（OOP）的核心概念之一，允许一个对象（子类）基于另一个对象（父类）的属性和方法进行扩展。JavaScript通过原型链（Prototype Chain）实现继承，这与基于类的语言（如Java）不同。本文将详细解释原型继承、构造函数继承、组合继承等模式，并提供实际应用示例。

简介

在JavaScript中，对象可以通过继承共享其他对象的属性和方法，从而减少代码重复并提高可维护性。继承的主要方式包括：

• 原型继承：通过原型链实现属性和方法的共享。
• 构造函数继承：在子类构造函数中调用父类构造函数。
• 组合继承：结合原型继承和构造函数继承的优点。
• ES6类继承：使用`class`和`extends`关键字简化继承语法。

原型继承

JavaScript中的每个对象都有一个内部属性`Prototype`（可通过`__proto__`或`Object.getPrototypeOf()`访问）。当访问对象的属性时，若对象本身没有该属性，则会沿着原型链向上查找。

基本示例

  
// 父对象  
const animal = {  
  type: 'Animal',  
  describe() {  
    return `This is a ${this.type}`;  
  }  
};  

// 子对象继承自animal  
const dog = Object.create(animal);  
dog.type = 'Dog';  

console.log(dog.describe()); // 输出: "This is a Dog"

解释： 1. `Object.create(animal)`创建一个新对象`dog`，并将其`Prototype`指向`animal`。 2. `dog.type`覆盖了原型中的`type`属性。 3. `describe()`方法从原型链中继承。

原型链图示

graph LR dog --> animal --> Object.prototype --> null

构造函数继承

通过调用父类构造函数初始化子类的实例属性，但无法继承父类原型上的方法。

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

Animal.prototype.describe = function() {  
  return `This is a ${this.type}`;  
};  

function Dog(type, name) {  
  Animal.call(this, type); // 调用父类构造函数  
  this.name = name;  
}  

const myDog = new Dog('Dog', 'Rex');  
console.log(myDog.type); // 输出: "Dog"  
// console.log(myDog.describe()); // 报错：describe未定义

问题：`Dog`实例无法访问`Animal.prototype`的方法。

组合继承

结合构造函数继承和原型继承，解决上述问题。

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

Animal.prototype.describe = function() {  
  return `This is a ${this.type}`;  
};  

function Dog(type, name) {  
  Animal.call(this, type); // 构造函数继承  
  this.name = name;  
}  

// 原型继承  
Dog.prototype = Object.create(Animal.prototype);  
Dog.prototype.constructor = Dog; // 修复constructor指向  

const myDog = new Dog('Dog', 'Rex');  
console.log(myDog.describe()); // 输出: "This is a Dog"

关键步骤： 1. `Animal.call(this)`初始化实例属性。 2. `Object.create(Animal.prototype)`建立原型链。 3. 修复`constructor`属性以确保类型正确。

ES6类继承

ES6引入`class`和`extends`语法糖，简化继承实现。

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

  describe() {  
    return `This is a ${this.type}`;  
  }  
}  

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

const myDog = new Dog('Dog', 'Rex');  
console.log(myDog.describe()); // 输出: "This is a Dog"

优势：

• 语法更清晰。
• `super`关键字简化父类方法调用。

实际应用案例

场景：构建一个图形编辑器，支持多种形状（矩形、圆形）的公共属性和方法继承。

  
class Shape {  
  constructor(color) {  
    this.color = color;  
  }  

  draw() {  
    return `Drawing a ${this.color} shape`;  
  }  
}  

class Circle extends Shape {  
  constructor(color, radius) {  
    super(color);  
    this.radius = radius;  
  }  

  draw() {  
    return `${super.draw()} with radius ${this.radius}`;  
  }  
}  

const redCircle = new Circle('red', 10);  
console.log(redCircle.draw()); // 输出: "Drawing a red shape with radius 10"

总结

JavaScript对象继承通过原型链实现，主要方式包括：

• 原型继承：适用于方法共享。
• 构造函数继承：适用于实例属性初始化。
• 组合继承：结合两者优势。
• ES6类继承：推荐使用，语法简洁。

理解这些模式有助于设计更灵活的代码结构。