ES6 类和 ES5 函数构造函数的区别

在 JavaScript 中，我们可以使用不同的方式来创建对象。两种常见的方法是使用 ES6 类和 ES5 函数构造函数。虽然它们都可以用来创建对象，但它们之间有一些重要的区别。本文将介绍 ES6 类和 ES5 函数构造函数的区别。

ES5 函数构造函数

ES5 中创建对象的方式是使用函数构造函数。函数构造函数是一个普通函数，但是通过使用 new 运算符来调用它时，它会创建一个新的对象并返回。

下面是一个简单的 ES5 函数构造函数的例子：

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

Person.prototype.getName = function () {
  return this.name;
};

Person.prototype.getAge = function () {
  return this.age;
};

var person = new Person('Bob', 30);
console.log(person.getName()); // 输出 'Bob'
console.log(person.getAge());  // 输出 30

在这个例子中，我们定义了一个 Person 函数构造函数，它有两个参数 name 和 age。我们还在 Person 的原型上定义了两个方法 getName 和 getAge。

我们使用 new 运算符调用函数构造函数，它将创建一个新的 Person 对象，并将其赋值给变量 person。

我们可以通过调用对象的方法来访问对象的属性。

ES6 类

ES6 中引入了类的概念，它是基于传统的面向对象编程概念的，但实现上更像是基于原型的。

下面是一个简单的 ES6 类的例子：

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

  getName() {
    return this.name;
  }

  getAge() {
    return this.age;
  }
}

const person = new Person('Bob', 30);
console.log(person.getName()); // 输出 'Bob'
console.log(person.getAge());  // 输出 30

在这个例子中，我们定义了一个 Person 类，并在构造函数中定义了 name 和 age 属性。我们还在类上定义了两个方法 getName 和 getAge。

然后，我们创建一个新的 Person 对象，并将其赋值给变量 person。

我们可以通过调用对象的方法来访问对象的属性。

区别

尽管 ES6 类和 ES5 函数构造函数都可以用来创建对象，但它们之间有一些重要的区别：

• 语法不同。ES6 类使用 class 关键字，而 ES5 函数构造函数使用普通函数定义对象。
• 类方法中没有逗号。在 ES6 类中，方法之间没有逗号，而在 ES5 函数构造函数中，方法之间必须使用逗号分隔。
• 类成员默认是公有的。在 ES6 类中，所有成员（包括属性和方法）默认都是公有的，而在 ES5 函数构造函数中，成员必须手动设置为公有或私有。
• 类没有变量提升。在 ES6 类中，类不会被提升到脚本的顶部，而在 ES5 函数构造函数中，函数构造函数和原型方法都可以被提升到脚本的顶部。
• 类不能像函数一样被调用。在 ES6 中，类不能像函数一样调用。您必须使用 new 运算符来调用类并创建对象。

结论

尽管 ES6 类和 ES5 函数构造函数都可以用于创建对象，但使用 ES6 类创建对象更加简单和直观。ES6 类也更容易阅读和理解，因为它们使用了更接近传统面向对象编程的语法。

当然，需要注意的是，由于 ES6 类的浏览器兼容性较差，如果需要兼容旧版本的浏览器，建议使用 ES5 函数构造函数来创建对象。