ES6之class基础和实现

2024-02-01 19:46:22

前言

在ES6之前，JavaScript中没有class的概念，对象创建和继承都是通过函数和原型链来实现的。这使得JavaScript的代码难以阅读和维护。ES6引入class的概念，使JavaScript更加接近其他面向对象语言，如Java和C++。

class基础

ES6中的class与其他语言中的class非常相似。它定义了一个对象的蓝图，可以用来创建对象实例。class由以下部分组成：

class声明： class声明以class开头，后面跟一个类名。
类体： 类体包含类的属性和方法。属性是类的成员变量，方法是类的成员函数。
构造函数： 构造函数是类的特殊方法，用于初始化类的实例。构造函数的名称与类名相同。

class实例

要创建类的实例，可以使用new关键字。new关键字后面跟类名，后面可以跟参数。参数将被传递给类的构造函数。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const person = new Person('John', 30);

console.log(person.name); // John
console.log(person.age); // 30

class继承

ES6中的class支持继承。要继承一个类，可以使用extends关键字。extends关键字后面跟父类的类名。

class Employee extends Person {
  constructor(name, age, salary) {
    super(name, age);
    this.salary = salary;
  }
}

const employee = new Employee('John', 30, 10000);

console.log(employee.name); // John
console.log(employee.age); // 30
console.log(employee.salary); // 10000

Babel对class的转换

Babel是一个JavaScript编译器，可以将ES6代码转换成ES5代码。Babel对class的转换原理如下：

将class声明转换成一个函数声明。
将类体中的属性和方法转换成函数体中的变量和函数。
将构造函数转换成一个函数，并将this关键字转换成一个参数。
将类的实例转换成一个对象的字面量。

// ES6代码
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// Babel转换后的代码
function Person(name, age) {
  this.name = name;
  this.age = age;
}

简单的原理实现

我们可以自己实现一个简单的class。我们可以使用一个函数来模拟类的声明，使用一个对象来模拟类的实例。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person = new Person('John', 30);

person.sayHello(); // Hello, my name is John and I am 30 years old.