登录
首页 >  文章 >  前端

new操作符四步解析及myNew实现详解

时间:2026-05-29 13:01:02 321浏览 收藏

本文深入剖析了 JavaScript 中 new 操作符背后隐含的四大核心执行步骤——创建继承自构造函数原型的空对象、显式绑定 this 并执行构造函数、智能处理返回值(优先返回构造函数显式返回的对象/函数)、最终整合为可复用的 myNew 自定义实现;通过手写代码还原底层机制,不仅帮你彻底理解 new 的工作原理,更能提升对原型链、this 绑定和类型判断等关键概念的实战掌控力,是深入 JS 原理不可错过的硬核解析。

要模拟 new 操作符的行为,关键在于理解它内部实际执行的四个步骤,并用 JavaScript 手动还原:创建空对象、绑定原型、执行构造函数、返回正确结果。

1. 创建一个全新的空对象

这是第一步,本质是生成一个继承自构造函数 prototype 的普通对象。不能直接写 {},因为那样会丢失原型链;必须用 Object.create() 显式指定原型。

  • Object.create(constructor.prototype) 创建新对象
  • 这样确保新对象的 __proto__ 指向构造函数的 prototype

2. 将 this 绑定到新对象并执行构造函数

构造函数内部的 this 必须指向刚创建的对象,这样才能让属性和方法挂载到它上面。需要用 callapply 显式调用。

  • 把新对象作为第一个参数传给 constructor.call()
  • 剩余参数(如果有)用扩展运算符 ...args 一并传入

3. 处理构造函数的返回值

这一步容易被忽略:如果构造函数显式返回了一个对象(包括数组、函数、正则等引用类型),new 会优先返回它;否则才返回新创建的对象。

  • 检查 result 是否为对象或函数类型且不为 null
  • 如果是,则返回该 result;否则返回新对象

4. 完整实现 myNew

把以上三步组合起来,注意参数收集和返回逻辑:

function myNew(constructor, ...args) {
  const obj = Object.create(constructor.prototype);
  const result = constructor.apply(obj, args);
  return (result !== null && typeof result === 'object') || typeof result === 'function'
    ? result
    : obj;
}

你可以用它替代 new 来实例化构造函数,行为一致,比如:myNew(Person, 'Alice', 25)

以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>