ES6之后类的底层逻辑

在 ES6 之后，JavaScript 中类的底层逻辑主要是基于原型和构造函数实现的，但在语法上进行了更接近传统面向对象编程语言的封装。

以下是对 ES6 类底层逻辑的分析：

初始化对象属性：
- 当使用new关键字创建类的实例时，首先会调用类的构造函数。构造函数中的代码用于初始化对象的实例属性。
- 例如在下面的类中：
```
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
```
- 当new Person('Alice', 30)被执行时，构造函数会接收参数'Alice'和30，并将它们分别赋值给实例对象的name和age属性。
this的指向：
- 在构造函数中，this关键字指向正在创建的实例对象。这使得可以直接在构造函数中为实例对象添加属性和方法。
- 例如，this.name = name就是将参数name的值赋给实例对象的name属性。

方法存储：
- 类中定义的方法实际上是存储在类的原型对象上的。这意味着多个实例对象可以共享这些方法，从而节省内存空间。
- 继续以Person类为例，sayHello方法是存储在Person.prototype上的：
```
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}
```
- 当创建多个Person实例对象时，它们都可以访问到sayHello方法，而这个方法在内存中只有一份。
原型链查找：
- 当访问一个对象的属性或方法时，如果在对象本身找不到，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端（Object.prototype）。
- 例如，如果在一个Person实例对象上调用sayHello方法，首先会在实例对象本身查找，如果找不到，就会在Person.prototype上查找。

extends关键字：
- ES6 中使用extends关键字实现类的继承。子类会继承父类的构造函数和原型上的方法。
- 例如：
```
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying.`);
  }
}
```
- 这里，Student类继承了Person类。当创建Student的实例对象时，首先会调用Student类的构造函数，在构造函数中又通过super关键字调用了父类Person的构造函数，以确保父类的属性被正确初始化。
原型链的调整：
- 在继承过程中，JavaScript 会调整子类的原型对象，使其指向父类的原型对象，从而实现原型链的继承。这样，子类的实例对象就可以访问父类原型上的方法。

综上所述，ES6 中的类在底层仍然是基于原型和构造函数实现的，但通过新的语法提供了更简洁、更直观的面向对象编程方式。

Last updated 1 year ago