es5 和 es6 使用 new 关键字实例化对象的流程是一样的吗？

ES5 和 ES6 在使用 new 关键字实例化对象时，整体流程类似，但在细节上有一些关键区别。下面是详细的对比：

1. ES5 的 new 实例化流程

1. 创建新对象：new 关键字会创建一个新对象。
2. 设置原型：新对象的 [[Prototype]] 被设置为构造函数的 prototype 属性。
3. 绑定 this：构造函数内部的 this 被绑定到新创建的对象上。
4. 执行构造函数：构造函数会被执行，其内部代码会初始化新对象的属性。
5. 返回对象：如果构造函数返回一个对象，则返回这个对象；如果返回的是基本类型（如 string、number、boolean），则返回新创建的对象。

示例

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

var person = new Person("Alice");
console.log(person.name); // Alice

2. ES6 的 new 实例化流程

ES6 中的 class 语法是基于 ES5 的构造函数语法封装的，new 的基本流程与 ES5 类似，但有一些新特性和要求：

1. 创建新对象：new 关键字会创建一个新对象。
2. 设置原型：新对象的 [[Prototype]] 被设置为类的 prototype 属性。
3. 绑定 this：类的构造函数中的 this 被绑定到新创建的对象上。
4. 执行构造函数：构造函数会被执行，用于初始化新对象的属性。
5. 返回对象：如果构造函数返回一个对象，则返回这个对象；如果构造函数返回的是基本类型，返回新创建的对象。

示例

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

const person = new Person("Alice");
console.log(person.name); // Alice

主要区别

1. 语法：

   • ES5 使用函数和 prototype 来定义构造函数。
   • ES6 引入了 class 语法，使得构造函数的定义更简洁和直观。

2. 继承：

   • ES5 使用原型链和构造函数实现继承。
   • ES6 使用 extends 关键字实现继承，语法更清晰。

3. 静态方法：

   • ES5 中静态方法是直接定义在构造函数上。
   • ES6 class 语法支持使用 static 关键字定义静态方法。

4. 类和构造函数：

   • ES6 中的类构造函数必须使用 new 调用，否则会抛出错误。而 ES5 中的构造函数如果没有使用 new 调用，也不会抛出错误（this 可能会不正确）。