JavaScript中的new操作符的原理解析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript中的new操作符的原理解析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2426字，纯文字阅读大概需要4分钟。
内容图文
文章目录
- new关键字进行的操作
- 自己实现new操作符
JavaScript中new操作符用于创建一个给定构造函数的对象实例。如下例子：
function Person(name, age){ this.name = name; this.age = age; } const person1 = new Person('Tom', 20) console.log(person1) // Person {name: "Tom", age: 20}
我们定义了一个构造函数Person，然后通过new操作符生成Person构造函数的一个实例并将其引用赋值给变量person1。然后控制台打印出person1的内容，可以看到该实例对象具有name和age属性，它们的值就是我们在调用构造函数时传入的值。
那么，我们使用new操作符的时候都发生了哪些事呢？
备注：如果对JS中的prototype、proto与constructor属性不大熟悉的话，强烈建议先看一下这篇文章再来看一下内容：帮你彻底搞懂JS中的prototype、proto与constructor（图解）
new关键字进行的操作
new关键字进行了如下的操作（为了便于描述，obj用来表示创建的空对象、用constrc来表示构造函数）：
- 创建一个空对象obj（{}）；
- 将obj的[[prototype]]属性指向构造函数constrc的原型（即obj.[[prototype]] = constrc.prototype）。
- 将构造函数constrc内部的this绑定到新建的对象obj，执行constrc（也就是跟调用普通函数一样，只是此时函数的this为新创建的对象obj而已，就好像执行obj.constrc()一样）；
- 若构造函数没有返回非原始值（即不是引用类型的值），则返回该新建的对象obj（默认会添加return this）。否则，返回引用类型的值。
这里补充说明一下：[[prototype]]属性是隐藏的，不过目前大部分新浏览器实现方式是使用proto来表示。构造函数的prototype属性我们是可以显式访问的。
让我们用图来展示文章开头的那个例子的过程：
怎么样，是不是对new操作符的执行过程有了一个清晰的了解了？
自己实现new操作符
从上面我们已经清楚地掌握了new的执行过程，那么我们就动手来自己实现一下new操作吧！
function myNew(constrc, ...args) { const obj = {}; // 1. 创建一个空对象 obj.proto = constrc.prototype; // 2. 将obj的[[prototype]]属性指向构造函数的原型对象 // 或者使用自带方法：Object.setPrototypeOf(obj, constrc.prototype) const result = constrc.apply(obj, args); // 3.将constrc执行的上下文this绑定到obj上，并执行 return result instanceof Object ? result : obj; //4. 如果构造函数返回的是对象，则使用构造函数执行的结果。否则，返回新创建的对象。 // instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 } // 使用的例子： function Person(name, age){ this.name = name; this.age = age; } const person1 = myNew(Person, 'Tom', 20) console.log(person1) // Person {name: "Tom", age: 20}
这里的关键两步就是：
- 将新创建对象的原型链设置正确，这样我们才能使用原型链上的方法。
- 将新创建的对象作为构造函数执行的上下文，这样我们才能正确地进行一些初始化操作。
本文结束！
内容总结
以上是互联网集市为您收集整理的JavaScript中的new操作符的原理解析全部内容，希望文章能够帮你解决JavaScript中的new操作符的原理解析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。