深入理解JavaScript中的 new 关键字

1.new是什么？

在 JavaScript 中，new 关键字用于创建自定义对象类型的实例或内置对象的实例。通过 new 关键字，可以轻松地实例化对象并初始化它们的属性和方法。

2.new 的工作原理

当我们使用 new 关键字调用一个函数时，这个函数被称为构造函数。new 关键字执行以下步骤：

1. 创建一个空对象：首先 new 会创建了一个空对象，作为返回的对象实例
2. 设置原型 ：将生成的空对象的原型对象指向构造函数的 prototype 属性，从而设置原型链。
3. 绑定this: 将当前实例对象赋值给构造函数内部的 this，使得构造函数中的任何对 this 的操作都会影响新对象。
4. 执行构造函数：执行构造函数的初始代码。如果构造函数没有显式返回一个对象，那么new 表达式会默认返回新创建的对象。
5. 返回新对象：如果构造函数没显式返回一个对象，new 表达式会默认返回新创建的对象

3.代码示例

  //定义构造函数function Study(title){//设置属性this.title = title;//添加方法this.exportInfo = function(arg){console.log(`${title}：${arg}`)}// 如果这里返回一个引用类型的数据，那么 new 会返回这个引用类型的数据// return {}; // 这里注释掉，让 new 默认返回新创建的对象};//使用 new 关键字创建实例const Study1 = new Study("web");// 调用实例方法Study1.exportInfo("hello");// 输出：web：hello//检查原型链
console.log(Study.prototype == new Study().__proto__) // true 

模拟 new 的过程和行为

function createStudy(color) {// 创建一个新对象const obj = {};// 设置原型obj.__proto__ = Study.prototype;// 绑定 this 并执行构造函数Study.call(obj, color);// 返回新对象return obj;
}// 使用手动实现的 createStudy 函数创建 Study 实例
const study2 = createStudy('js');// 调用实例的方法
study2.exportInfo('中的prototype和this'); //输出：js：中的prototype和this

在这个手动实现的 createStudy 函数中，我们模拟了 new 关键字的四个主要步骤：创建新对象、设置原型、绑定 this 并执行构造函数、返回新对象。

4.总结

• 创建对象实例：new 关键字用于创建自定义对象类型的实例。
• 初始化对象：通过构造函数初始化新对象的属性和方法。
• 设置原型：新对象的原型对象指向构造函数的 prototype 属性。
• 绑定 this：构造函数内部的 this 被指派给新创建的对象。
• 返回新对象：如果构造函数没有显式返回一个对象，new 表达式会默认返回新创建的对象。