深入理解ES6中类（class）的底层原理

899字
4分钟
2024-09-13
- JavaScript

ES6 引入了类（class）这一特性，使得 JavaScript 的面向对象编程风格更加简洁和易于理解。尽管类看起来像其他编程语言中的经典面向对象模型，但其底层依然是 JavaScript 早已存在的原型继承机制。本文将深入解析 ES6 类的底层原理，帮助你更好地理解其工作机制。

1. 类本质是构造函数

在 ES6 中定义的类，实际上是一个构造函数。你可以通过 typeof 关键字验证类的本质：

1
class Person {
2
  constructor(name) {
3
    this.name = name;
4
  }
5
}
6

7
console.log(typeof Person); // "function"

类的定义最终会被编译成一个函数，这意味着类只是构造函数的一种语法糖。

2. 构造函数的工作原理

类中的 constructor 方法是用于初始化类实例的构造函数。在创建类的实例时，new 关键字会调用这个构造函数：

1
class Person {
2
  constructor(name) {
3
    this.name = name;
4
  }
5
}
6

7
const p = new Person("Alice");
8
console.log(p.name); // "Alice"

这与传统的 ES5 函数构造器极为相似：

1
function Person(name) {
2
  this.name = name;
3
}
4

5
const p = new Person("Alice");
6
console.log(p.name); // "Alice"

3. 原型继承

类中的方法是在其原型上定义的，这与 ES5 的原型继承机制完全一致。每当定义一个类的方法时，实际上是将这些方法添加到该类的原型上：

1
class Person {
2
  constructor(name) {
3
    this.name = name;
4
  }
5

6
  greet() {
7
    console.log(`Hello, ${this.name}!`);
8
  }
9
}
10

11
const p = new Person("Alice");
12
p.greet(); // "Hello, Alice!"

在 ES5 中实现相同效果的方法如下：

1
function Person(name) {
2
  this.name = name;
3
}
4

5
Person.prototype.greet = function () {
6
  console.log(`Hello, ${this.name}!`);
7
};
8

9
const p = new Person("Alice");
10
p.greet(); // "Hello, Alice!"

类的底层继承机制仍然是通过原型链实现的。

4. 类继承机制

ES6 提供了 extends 关键字来支持类的继承，这实际上依赖于 JavaScript 原有的原型继承。子类继承父类时，子类的原型指向父类的原型，这样就实现了方法的继承：

1
class Animal {
2
  constructor(name) {
3
    this.name = name;
4
  }
5

6
  speak() {
7
    console.log(`${this.name} makes a noise.`);
8
  }
9
}
10

11
class Dog extends Animal {
12
  speak() {
13
    console.log(`${this.name} barks.`);
14
  }
15
}
16

17
const d = new Dog("Rex");
18
d.speak(); // "Rex barks."

这等价于 ES5 中使用原型链手动实现继承：

1
function Animal(name) {
2
  this.name = name;
3
}
4

5
Animal.prototype.speak = function () {
6
  console.log(`${this.name} makes a noise.`);
7
};
8

9
function Dog(name) {
10
  Animal.call(this, name);
11
}
12

13
Dog.prototype = Object.create(Animal.prototype);
14
Dog.prototype.constructor = Dog;
15

16
Dog.prototype.speak = function () {
17
  console.log(`${this.name} barks.`);
18
};
19

20
const d = new Dog("Rex");
21
d.speak(); // "Rex barks."

5. 使用 `super` 调用父类方法

super 关键字允许子类调用父类的构造函数和方法。在子类构造函数中，super 用于调用父类的构造函数，继承父类的属性和方法：

1
class Animal {
2
  constructor(name) {
3
    this.name = name;
4
  }
5
}
6

7
class Dog extends Animal {
8
  constructor(name, breed) {
9
    super(name); // 调用父类构造函数
10
    this.breed = breed;
11
  }
12
}
13

14
const d = new Dog("Rex", "Labrador");
15
console.log(d.name); // "Rex"
16
console.log(d.breed); // "Labrador"

在 ES5 中，可以通过显式调用父类构造函数来实现类似的效果：

1
function Animal(name) {
2
  this.name = name;
3
}
4

5
function Dog(name, breed) {
6
  Animal.call(this, name); // 调用父类构造函数
7
  this.breed = breed;
8
}
9

10
const d = new Dog("Rex", "Labrador");
11
console.log(d.name); // "Rex"
12
console.log(d.breed); // "Labrador"

总结

ES6 类的引入为 JavaScript 的面向对象编程提供了更简洁的语法，但其底层仍然依赖于构造函数和原型链机制。类实际上是构造函数的语法糖，类的继承机制也是基于原型链的。通过 super，子类可以调用父类的构造函数和方法，从而实现继承关系。理解类的底层原理有助于我们在实际开发中更好地利用 JavaScript 的面向对象特性。