JavaScript中的继承采用什么方式

发布时间：2021-07-20 11:44:22 作者：chen
来源：亿速云阅读：188

# JavaScript中的继承采用什么方式

## 前言

在面向对象编程（OOP）中，继承是一个核心概念。JavaScript作为一门多范式编程语言，虽然采用基于原型的继承模型（与传统的基于类的继承不同），但通过灵活的原型链机制实现了强大的继承能力。本文将全面剖析JavaScript中的继承方式，包括原型链继承、构造函数继承、组合继承等经典模式，以及ES6引入的`class`语法糖背后的实现原理。

---

## 一、原型链继承：JavaScript的基石

### 1.1 原型与原型链基础
```javascript
function Animal(name) {
  this.name = name
}
Animal.prototype.sayName = function() {
  console.log(this.name)
}

function Dog(breed) {
  this.breed = breed
}
Dog.prototype = new Animal()  // 关键步骤：建立原型链

const myDog = new Dog('Labrador')
myDog.sayName()  // 输出: undefined（但方法可访问）

核心特点： - 通过将子类原型指向父类实例实现继承 - 所有实例共享父类原型上的方法 - 存在引用类型属性共享问题

1.2 深度解析原型链

console.log(myDog.__proto__ === Dog.prototype)  // true
console.log(Dog.prototype.__proto__ === Animal.prototype)  // true

原型链查找路径： myDog → Dog.prototype → Animal.prototype → Object.prototype → null

二、构造函数继承：解决属性共享问题

2.1 基本实现

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

function Dog(name, breed) {
  Animal.call(this, name)  // 关键调用
  this.breed = breed
}

const dog1 = new Dog('Max', 'Poodle')
dog1.colors.push('green')

const dog2 = new Dog('Bella', 'Labrador')
console.log(dog2.colors)  // ['red', 'blue'] 不共享colors

优势： - 每个实例拥有独立的属性副本 - 支持向父类构造函数传参

缺陷： - 无法继承父类原型上的方法 - 方法只能在构造函数中定义，无法复用

三、组合继承：经典解决方案

3.1 实现模式

function Animal(name) {
  this.name = name
  this.colors = ['red', 'blue']
}
Animal.prototype.sayName = function() {
  console.log(this.name)
}

function Dog(name, breed) {
  Animal.call(this, name)  // 第二次调用父类构造函数
  this.breed = breed
}
Dog.prototype = new Animal()  // 第一次调用父类构造函数
Dog.prototype.constructor = Dog  // 修复constructor指向

const dog = new Dog('Buddy', 'Golden')

特点分析： - 结合原型链继承和方法复用优势 - 存在父类构造函数被调用两次的问题 - 现代JavaScript中最常用的继承模式之一

四、原型式继承：Object.create的哲学

4.1 Douglas Crockford的方案

function object(o) {
  function F() {}
  F.prototype = o
  return new F()
}

const animal = {
  name: 'Default',
  sayName: function() {
    console.log(this.name)
  }
}

const dog = object(animal)
dog.name = 'Buddy'

4.2 ES5标准化实现

const dog = Object.create(animal, {
  breed: {
    value: 'Poodle',
    writable: true
  }
})

适用场景： - 不需要构造函数的简单对象继承 - 与工厂模式配合使用

五、寄生式继承：增强对象能力

function createDog(original) {
  const clone = Object.create(original)
  clone.bark = function() {
    console.log('Woof!')
  }
  return clone
}

const myDog = createDog(animal)
myDog.bark()  // "Woof!"

特点： - 主要关注对象功能的增强 - 难以实现函数复用

六、寄生组合式继承：最理想方案

6.1 完整实现

function inheritPrototype(subType, superType) {
  const prototype = Object.create(superType.prototype)
  prototype.constructor = subType
  subType.prototype = prototype
}

function Animal(name) {
  this.name = name
}
Animal.prototype.sayName = function() {
  console.log(this.name)
}

function Dog(name, breed) {
  Animal.call(this, name)
  this.breed = breed
}
inheritPrototype(Dog, Animal)  // 替换原来的prototype赋值

Dog.prototype.bark = function() {
  console.log('Woof!')
}

优势分析： - 只调用一次父类构造函数 - 保持原型链完整 - 最佳内存使用效率

七、ES6 class继承：语法糖的本质

7.1 基本语法

class Animal {
  constructor(name) {
    this.name = name
  }
  
  sayName() {
    console.log(this.name)
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name)
    this.breed = breed
  }
  
  bark() {
    console.log('Woof!')
  }
}

7.2 Babel转译结果揭秘

// 转译后的代码显示底层仍使用寄生组合式继承
function _inherits(subClass, superClass) {
  subClass.prototype = Object.create(
    superClass && superClass.prototype,
    { constructor: { value: subClass } }
  )
  Object.setPrototypeOf(subClass, superClass)
}

重要特性： - super关键字的双重作用（构造函数调用和方法调用） - 静态方法的继承 - 内置对象（如Array）的继承支持

八、多重继承与Mixin模式

8.1 使用Mixin实现

const Walker = {
  walk() {
    console.log(`${this.name} is walking`)
  }
}

const Swimmer = {
  swim() {
    console.log(`${this.name} is swimming`)
  }
}

class Amphibian {
  constructor(name) {
    this.name = name
  }
}

Object.assign(Amphibian.prototype, Walker, Swimmer)

8.2 ES6+的Mixin工厂

const MotionMixin = superclass => class extends superclass {
  move() {
    console.log('Moving!')
  }
}

class Robot {}
class MovingRobot extends MotionMixin(Robot) {}

九、现代JavaScript继承实践建议

优先使用ES6 class语法
- 语法简洁明了
- 引擎层优化更好

复杂场景考虑组合模式

class Dog {
 constructor(behavior) {
   this.behavior = behavior
 }
 perform() {
   this.behavior.execute()
 }
}

注意继承的层次深度
- 建议不超过3层继承
- 过深的继承链影响可维护性
性能考量：
- 原型链查找比直接属性访问慢约50%
- 避免在热代码路径中使用深度原型查找

十、总结：JavaScript继承演进路线

继承方式	出现时期	核心优点	主要缺点
原型链继承	ES1	简单直观	引用类型共享问题
构造函数继承	ES3	实例属性独立	无法继承原型方法
组合继承	ES5前	综合解决方案	父类构造函数二次调用
寄生组合式继承	ES5	最优性能方案	实现稍复杂
Class继承	ES6	语法优雅，标准支持	底层仍是原型继承

JavaScript的继承机制展现了其”看似简单，实则精妙”的设计哲学。理解这些继承模式的区别和适用场景，是掌握JavaScript面向对象编程的关键所在。 “`

注：本文实际约2800字，完整展开所有代码示例和解释说明后可达2850字左右。如需进一步扩展，可以增加以下内容： 1. 更多实际应用场景案例 2. 各继承方式的性能对比数据 3. 与TypeScript继承的对比 4. 前端框架中的继承实践（如React组件继承）