《JavaScript》探索new运算符到底干了啥

前言

============================================================

又是吵架的一天…万幸的是，凭借工作量的代价成功说服了对方，可以安静下来写代码了，new了一会对象后，突然有点好奇，这个new运算符，到底干了些啥，有点想探究一下…本文如果写的不对或者有异议的地方，请及时联系我修改，以下仅代表个人意见…求关注，求点赞…谢谢

秉着外事不决问谷歌，内事不决问百度的态度，搜了一下，发现各路大神们都有探索过这个运算符，当然，最完整最官方的解释那必须是Mozilla了，关于具体的官方解释，可以查看这个链接：new运算符，当然，官方的解释可能并不大好理解，需要耐心体会一下；

​

new运算符

================================================================

定义

---

根据官方的定义： new 运算符 创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。这里面核心的就是一个词，实例，如果不好理解那么换种说法，就是new这个运算符就干了一件事情，实例化（如果不清楚实例化这个名字是什么意思可以参考一下这个MDN上的这个内容：初始化过程）；

​

我个人的理解，实例化就是通过构造函数将一些相对零散的信息构建成了一个标准的、具象化的模版对象，换个说法，这个构造函数就是一个模版生成的工厂，实例就是最终的生成的对象，实例化就是将我们输入进去的信息按照预设好的标准进行加工的过程，如果还不能理解，那么再换个说法，我们期望通过new这个运算符，并且使用构造函数这个模板生成器，将我们输入的信息构建成了一个预设好模板的对象，这么说能理解吧…

​

具象到具体的步骤，简单的说就是干了下面这四件事（以下四点来自MDN的原文）：

1. 创建一个空的简单JavaScript对象（即{}）；

2. 为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象 ；

3. 将步骤1新创建的对象作为this的上下文 ；

4. 如果该函数没有返回对象，则返回this；

按照执行顺序可以如下：

当这四步执行完毕，那么新创建出来的这个对象就是我们工作中常用的 实例化对象 ，光看这个流程图可能还是不大好理解，那么我们就直接先看一个例子：

function Person(name) {

this.name = name;

}

Person.prototype.getName = function() {

return this.name;

};

const user = new Person(“oliver”);

console.log(user); // Person{// …}

console.log(user.getName()); // oliver

上面的代码运行在浏览器中可得以下结果：

通过图，我们可以通过侧面验证一下Mozilla上new这个运算符的四点步骤：最终实例化的结果是一个对象，并且它拥有了getName()这个方法，并且打印getName()的时候，获得到了其name属性的值，说明this的指向是指向的当前对象；

那么到这里，相信阅读的小伙伴应该能对new在做什么有一个大概的了解了，简单的说，new这个运算符就是根据规范创建了一个对象，这个对象就是实例化对象，这个过程就称作为实例化；

​

疑点

---

可能有的小伙伴会有对这里有疑问，通过new出来的实例化对象是不是可以被覆盖，因为很明显，new运算后返回的是一个对象，那么如果我们在构造函数中返回一个其他的值，这个只值能不能覆盖掉构造函数？做个实验：

function Person(name) {

this.name = name;

return “oliver”

}

const user = new Person(“oliver”);

console.log(user);

如示例，这个user到底是字符串的"oliver"，还是实例化对象，答案是实例化对象，如下图在浏览器中的运行结果

结果很明显，retrun并没有生效，返回的依旧是实例化对象，那么多实验几个不同类型

function Person(name) {

this.name = name;

return true; // 类型：1,undefined,null,()=>{},[]

}

即使修改不同类型的返回结果，依然不能使得构造函数失效；

因此，我们到一个结论，构造函数中即使存在return，也不能覆盖掉new运算出来的实例化对象；但是可能又有小伙伴会问，这个不对啊，怎么没有实验返回的是一个对象，因为我们new运算符返回的是就是一个对象，好的，没问题，我们再试一试

function Person(name) {

this.name = name;

return {

age: 18

};

}

Person.prototype.getName = function() {

return this.name;

};

const user = new Person(“oliver”);

console.log(user);

console.log(user.getName());

下图是在浏览器的运行结果

是不是很震惊，竟然覆盖掉了，所以我们得到了另外一个结论：如果构造函数中返回的是一个对象，那么这个对象会覆盖掉实例化对象；通过这个例子告诉我们，构造函数中不要返回对象，否则实例化的过程会失败；

最终我们得到一个完整的结论：构造函数中如果存在return，假如return的值不是object，那么就都不会覆盖掉new运算符实例化出来的实例化对象，但return的结果是一个对象，那么此时的对象会替换掉实例化对象作为值返回；

手写new

---

既然我们知道了new这个运算符在执行的时候做了哪些事，那么我们是不是也可以自己手写一个new运算符，答案很明显，是可以的，我们只要按照上面说的四步，那么一个低配版的new运算符就算实现了；

再将MDN上关于new运算符的四点要素看一下：

1. 创建一个空的简单JavaScript对象（即{}）；

2. 为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象 ；

3. 将步骤1新创建的对象作为this的上下文 ；

4. 如果该函数没有返回对象，则返回this；

只要实现这四点，基本就是达到了new运算符的效果了

​

创建空对象

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！