Babel助力ES6 class与ES5构造函数对比

2023-10-04 15:30:06

ES6 Class与ES5构造函数的对比

ES6的出现, 给Javascript带来了很多新的语法糖, 其中class和构造函数的对比是一大亮点, 那么ES6 class和ES5构造函数到底有什么异同呢?

语法异同

类定义方式

// ES5 构造函数
function Person(name, age, address) {
  this.name = name;
  this.age = age;
  this.address = address;
}

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

相同点

两种方式都是通过一个函数来创建对象。
两种方式都需要在函数中定义对象的属性和方法。

不同点

ES5 构造函数使用function来定义，而 ES6 class 使用class关键字来定义。
ES5 构造函数中的属性和方法是直接定义在函数中的，而 ES6 class 中的属性和方法是定义在 constructor() 方法中。

类的实例化

// ES5 构造函数
const person = new Person('John Doe', 30, '123 Main Street');

// ES6 class
const person = new Person('John Doe', 30, '123 Main Street');

相同点

两种方式都是通过new关键字来创建对象实例。

不同点

ES5 构造函数的实例化不需要使用()括号，而 ES6 class 的实例化需要使用()括号。

类继承

// ES5 构造函数继承
function Parent(name) {
  this.name = name;
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}
Child.prototype = Object.create(Parent.prototype);

// ES6 class 继承
class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

相同点

两种方式都是通过子类继承父类来创建新的类。

不同点

ES5 构造函数继承使用call()方法来调用父类的构造函数，而 ES6 class 继承使用super()关键字来调用父类的构造函数。
ES5 构造函数继承使用Object.create()方法来创建子类的原型，而 ES6 class 继承使用extends关键字来创建子类的原型。

私有属性和方法

// ES5 构造函数私有属性和方法
function Person() {
  var privateVariable = 10;

  this.publicMethod = function() {
    console.log(privateVariable);
  };
}

// ES6 class 私有属性和方法
class Person {
  #privateVariable = 10;

  publicMethod() {
    console.log(this.#privateVariable);
  }
}