深入理解JavaScript中的类和原型继承-优快云博客

深入理解JavaScript中的类和原型继承

you-dont-know-js-ru :books: Russian translation of "You Don't Know JS" book series 项目地址: https://gitcode.com/gh_mirrors/yo/you-dont-know-js-ru

类与面向对象编程的本质

面向对象编程(OOP)是一种广泛使用的编程范式，它强调将数据和行为封装在一起。在传统OOP语言中，类是这种封装的基本单位，它定义了对象的蓝图。

类的核心概念

封装：将数据和对数据的操作捆绑在一起
继承：子类可以继承父类的特性
多态：子类可以重写父类的方法

在JavaScript中，虽然ES6引入了class关键字，但这只是语法糖，底层仍然是基于原型的继承机制。

JavaScript中的"类"实现

构造函数模式

在ES6之前，我们通常使用构造函数来模拟类：

function Vehicle() {
  this.engines = 1;
}

Vehicle.prototype.ignition = function() {
  console.log("启动引擎");
};

Vehicle.prototype.drive = function() {
  this.ignition();
  console.log("前进!");
};

ES6类语法

ES6引入了更简洁的类语法：

class Vehicle {
  constructor() {
    this.engines = 1;
  }
  
  ignition() {
    console.log("启动引擎");
  }
  
  drive() {
    this.ignition();
    console.log("前进!");
  }
}

继承的实现方式

原型链继承

function Car() {
  Vehicle.call(this);
  this.wheels = 4;
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

Car.prototype.drive = function() {
  Vehicle.prototype.drive.call(this);
  console.log(`用${this.wheels}个轮子行驶`);
};

ES6类继承

class Car extends Vehicle {
  constructor() {
    super();
    this.wheels = 4;
  }
  
  drive() {
    super.drive();
    console.log(`用${this.wheels}个轮子行驶`);
  }
}

多态的实现

JavaScript中的多态是通过原型链查找实现的：

class SpeedBoat extends Vehicle {
  constructor() {
    super();
    this.engines = 2;
  }
  
  ignition() {
    console.log(`启动${this.engines}个引擎`);
  }
  
  pilot() {
    super.drive();
    console.log("乘风破浪!");
  }
}

JavaScript类与传统类的区别

本质不同：JavaScript的类实际上是函数，而传统语言中的类是特殊的结构
继承机制：JavaScript使用原型链，传统语言使用类继承
实例化过程：JavaScript通过构造函数创建实例，传统语言通过类直接实例化

混入模式(Mixins)

由于JavaScript的原型机制，实现多重继承较为复杂，混入模式成为一种替代方案：

// 混入工具函数
function mixin(sourceObj, targetObj) {
  for (var key in sourceObj) {
    if (!(key in targetObj)) {
      targetObj[key] = sourceObj[key];
    }
  }
  return targetObj;
}

var Vehicle = {
  engines: 1,
  ignition: function() {
    console.log("启动引擎");
  },
  drive: function() {
    this.ignition();
    console.log("前进!");
  }
};

var Car = mixin(Vehicle, {
  wheels: 4,
  drive: function() {
    Vehicle.drive.call(this);
    console.log(`用${this.wheels}个轮子行驶`);
  }
});