剖析 ES5 类与 ES6 Class 的差异：从构造函数到箭头函数的应用

2024-01-29 15:52:01

ES5 类与 ES6 Class 的区别 #

前言

在 JavaScript 的发展历程中，ES5 和 ES6 两个版本尤为引人注目。它们分别在 2009 年和 2015 年发布，带来了许多激动人心的新特性。其中，类（class）的概念就是一项重要的改进。在本文中，我们将深入探讨 ES5 类和 ES6 Class 之间的区别，揭示它们在语法、语义和应用方面的差异。

一、ES5 类与 ES6 Class 的语法差异

1. 类声明语法

在 ES5 中，我们可以通过构造函数的方式定义一个类：

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

而在 ES6 中，我们可以使用 class 来定义类：

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

从语法上看，ES6 Class 的声明更加简洁，它不需要使用 function 关键字，并且在构造函数中使用了 constructor 关键字来初始化类的属性。

2. 方法定义语法

在 ES5 中，我们可以通过原型的方式为类添加方法：

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

而在 ES6 中，我们可以直接在类中定义方法：

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

从语法上看，ES6 Class 的方法定义更加简洁，它不需要使用 prototype 关键字，并且可以在类中直接定义方法。

二、ES5 类与 ES6 Class 的语义差异

1. 构造函数的执行时机

在 ES5 中，构造函数会在类的实例化时执行。而 ES6 Class 的构造函数会在实例化时以及类的派生类实例化时执行，而且其返回值决定了实例化的对象。

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

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

// ES6
class Person {
  constructor(name, age) {
    // 构造函数的执行
    this.name = name;
    this.age = age;
  }
}

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

在 ES5 中，构造函数的执行只会在实例化时发生一次。而在 ES6 Class 中，构造函数的执行会在实例化时以及类的派生类实例化时发生多次。

2. 原型的继承关系

在 ES5 中，类的原型是通过 prototype 关键字定义的。而在 ES6 Class 中，类的原型是通过 extends 关键字定义的。

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

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

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

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