es6 class 与普通构造函数的区别

对比

ES6 中的类（class）与传统的构造函数在 JavaScript 中用于创建对象的方式之间存在许多区别。以下是 ES6 类和普通构造函数之间的主要区别：

1. 语法：

• ES6 类使用 class 关键字来定义类，而传统的构造函数使用函数来定义对象的构造。

ES6 类的语法示例：

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

传统构造函数的语法示例：

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
}

2. 类方法的定义：

• 在 ES6 类中，方法可以直接在类的内部定义，而不需要使用原型。这使得类的定义更加清晰和直观。
• 在传统构造函数中，方法通常是通过将它们添加到构造函数的原型上来定义的。

3. 构造函数：

• 在 ES6 类中，构造函数必须命名为 constructor，而在传统构造函数中，构造函数可以有任何名称。
• ES6 类中只能有一个构造函数，而传统构造函数可以拥有多个构造函数，通过不同的参数进行重载。

4. 继承：

• ES6 类支持更直观的类继承语法，使用 extends 关键字来实现继承。
• 传统构造函数使用原型链来实现继承，需要更多的手动操作。

ES6 类的继承示例：

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

传统构造函数的继承示例：

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

5. 类静态方法：

• ES6 类允许定义静态方法，这些方法可以在类本身上调用，而不需要创建类的实例。
• 传统构造函数通常不支持直接定义静态方法，需要通过构造函数本身定义静态方法。

ES6 类的静态方法示例：

class MathUtil {
  static square(x) {
    return x * x;
  }
}
MathUtil.square(4); // 调用静态方法

传统构造函数的静态方法示例：

function MathUtil() {}
MathUtil.square = function(x) {
  return x * x;
}
MathUtil.square(4); // 调用静态方法

总结

1.类的内部所有定义的方法，都是不可枚举的（但是在es5中prototype的方法是可以进行枚举的）

2.类的构造函数，不使用new是没法调用的，会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行

3.Class不存在变量提升（hoist），这一点与ES5完全不同

4.ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。