JavaScript中new操作符的执行原理与模拟实现

new的用处

new操作符的核心功能是利用构造函数生成一个实例对象，该实例与构造函数及其原型之间存在特定的关联，具体关系结构可参考相关图示。

先来总结一下

1. 第一步是创建一个空对象。
2. 第二步是将该空对象的内部属性__proto__设置为构造函数的prototype属性。
3. 第三步是将构造函数内部的this关键字指向这个新创建的空对象。
4. 第四步是执行构造函数内部的代码逻辑。
5. 最后一步是返回这个新创建的对象。

详细说明

当执行new操作时，系统会依次完成以下具体步骤：

1、创建一个空对象

• 这个空对象本质上是Object类型的实例，在代码中通常表示为{}。

let obj = {}

2、空对象的内部属性__proto__赋值为构造函数的prototype属性

• 执行此操作的目的是建立正确的原型链连接，使空对象能够访问原型上的属性和方法。

function Foo(num) {
  this.number = num
}

obj.__proto__ = Foo.prototype

3、将构造函数的this指向空对象

• 这意味着构造函数内部的this变量将被重新赋值为刚才创建的空对象，从而确保后续代码能正确地向该对象添加内容。

Foo.call(obj, 1)

4、执行构造函数内部代码

• 这一步骤的具体作用是为空对象添加特定的属性和方法。

5、返回该新对象

• 如果构造函数内部通过return语句返回了一个引用类型值，那么new操作最终会返回这个引用类型值；否则，它将返回刚才创建的新对象。
• 引用类型值是指除基本类型值（包括数值、字符串、布尔值、null、undefined、Symbol值）以外的所有其他值。

模拟 new 操作符

下面的myNew函数旨在模拟JavaScript原生new操作符的行为逻辑。

function myNew(func, ...args) {
  let obj = {}
  obj.__proto__ = func.prototype
  let res = func.apply(obj, args)
  return res instanceof Object ? res : obj
}

function Foo(num) {
  this.number = num
}

let foo1 = myNew(Foo, 1)
console.log(foo1 instanceof Foo)  // true
console.log(foo1.number)  // 1

let foo2 = new Foo(2)
console.log(foo2 instanceof Foo)  // true
console.log(foo2.number)  // 2

代码中通过instanceof操作符判断构造函数的返回值是否为Object的实例，即判断其是否为引用类型值；这是因为所有引用类型值都是Object的实例，而Object是所有引用类型值的基类型。

好了，到此这篇关于JavaScript中new操作符原理的文章就介绍到这了,更多相关JS new操作符原理内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！