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

按照执行顺序可以如下：

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

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运算符的效果了

​

创建空对象

在第一点中很简单，就是单纯的创建一个空对象：

// 1.创建空对象

const obj = new Object();

修改__proto__指向

这一步的目的是将__proto__和prototype关联起来

// 2.将空对象的__proto__指向新创建对象的prototype上

newObj.proto = Object.create(constructor.prototype);

这样做就达到了上面例子中，明明实例化对象上没有getName这个方法，但是还是能调用，因为虽然自身是没有，但是构造函数的原型上是存在的；

​

修改this指向

这一步也相对比较简单，就是修改this的上下文环境

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

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

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

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+点击【学习资料】即可免费领取！

链图片转存中…(img-ZCqbRSOJ-1713609466292)]

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+点击【学习资料】即可免费领取！

[外链图片转存中…(img-BoZm8qYj-1713609466292)]

[外链图片转存中…(img-CSFMnFpP-1713609466292)]