字节：如何模拟实现 new 操作符

不念不忘少年蓝@ 2023-01-15 14:28 198阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

[https://mp.weixin.qq.com/s/2elzsKW1uqVsp05QTuK0Kg][https_mp.weixin.qq.com_s_2elzsKW1uqVsp05QTuK0Kg]

**new 运算符**创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。**new** 关键字会进行如下的操作：

1.  创建一个空的简单JavaScript对象（即`{}`）；
2.  链接该对象（即设置该对象的构造函数）到另一个对象 ；
3.  将步骤1新创建的对象作为`this`的上下文 ；
4.  如果该函数没有返回对象，则返回`this`。

**代码实现：**

function new_object() {
      // 创建一个空的对象
      let obj = new Object()
      // 获得构造函数
      let Con = [].shift.call(arguments)
      // 链接到原型 （不推荐使用）
      obj.__proto__ = Con.prototype
      // 绑定 this，执行构造函数
      let result = Con.apply(obj, arguments)
      // 确保 new 出来的是个对象
      return typeof result === 'object' ? result : obj
    }

> **警告:** 通过现代浏览器的操作属性的便利性，可以改变一个对象的 `[[Prototype]]` 属性, 这种行为在每一个JavaScript引擎和浏览器中都是一个非常慢且影响性能的操作，使用这种方式来改变和继承属性是对性能影响非常严重的，并且性能消耗的时间也不是简单的花费在 `obj.__proto__ = ...` 语句上, 它还会影响到所有继承来自该 `[[Prototype]]` 的对象，如果你关心性能，你就不应该在一个对象中修改它的 \[\[Prototype\]\]。相反, 创建一个新的且可以继承 `[[Prototype]]` 的对象，推荐使用 `Object.create()`
> 
> —MDN

**所以进一步优化 new 实现:**

// 优化后 new 实现
    function create() {
      // 1、获得构造函数，同时删除 arguments 中第一个参数
      Con = [].shift.call(arguments);
      // 2、创建一个空的对象并链接到原型，obj 可以访问构造函数原型中的属性
      let obj = Object.create(Con.prototype);
      // 3、绑定 this 实现继承，obj 可以访问到构造函数中的属性
      let ret = Con.apply(obj, arguments);
      // 4、优先返回构造函数返回的对象
      return ret instanceof Object ? ret : obj;
    };

来自：https://github.com/sisterAn/JavaScript-Algorithms

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[https_mp.weixin.qq.com_s_2elzsKW1uqVsp05QTuK0Kg]: https://mp.weixin.qq.com/s?__biz=Mzg2NjUxOTM2Mg%3D%3D&idx=1&mid=2247484729&scene=21&sn=9b106affe7507eed1132a37bed2f8e0d#wechat_redirect