首页 / JAVASCRIPT / JavaScript中new操作符详解

JavaScript中new操作符详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript中new操作符详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1893字，纯文字阅读大概需要3分钟。

内容图文

JavaScript里实例化一个对象的时候，我们常用的方法就是使用new操作符。 本文主要和大家分享JavaScript中new操作符详解，希望能帮助到大家。

var Foo = function(x, y) {    this.x = x    this.y = y
}var foo = new Foo(1, 2) // Foo {x: 1, y: 2}

那么new操作符到底做了哪些工作？我们可以看一下foo这个对象到底是一个怎样的对象。

首先，foo本身是一个对象，然后，他本身有两个属性，x跟y。同时，在大多数浏览器的控制台上，我们还能看到一个颜色稍浅的属性，叫__proto__，他有两个属性，constructor跟__proto__。

__proto__是一个访问器属性。他指向的是当前对象本身的[[Prototype]]，这个[[Prototype]]并不是一个属性，他只是一个符号，代表的是构造函数Foo的原型对象Foo.prototype的，具体可以参考一下MDN上的描述。

foo.__proto__ === Foo.prototype // true

所以，我们大致描述一下

var Foo = function(x, y) {    this.x = x    this.y = y
}// 1. 创建一个空对象var foo = {}// 2. 调用构造函数，并且将构造函数的`this`指向fooFoo.call(foo, 1, 2)// 3. foo继承Foo的原型对象foo.__proto__ = Foo.prototype

等等，虽然我们上面这么写最后foo的确跟new Foo()出来的对象是一样的，但是情况并不仅仅这么简单。

我们知道，new操作符操作的是一个函数，在上面的栗子里，函数Foo并没有显式地返回任何值，所以执行这个函数之后，返回值是undefined。当构造函数没有显式地返回一个值的时候，对其执行new操作之后，会返回这个构造函数实例化之后的对象。

那如果我返回了某个值呢？

var Foo = function(x, y) {    this.x = x    this.y = y    return {        a: this.x
    }
}var foo = new Foo(1, 2) // {a: 1}

foo就是执行这个函数之后的返回值，那么这个时候new Foo()跟Foo()就没有任何区别了，所以通常情况下，我们并不会选择在一个构造函数里返回某个值。

特别要注意的是，如果你在构造函数里返回的不是一个对象，而是一个普通的值，比如说一个Number类型或者String类型的值，那么new之后返回的还是实例化之后的对象。

相关推荐：

js函数的new调用与普通调用中this的差异问题

关于new从一个BUG说起

js中的new操作符运行过程是怎样的

以上就是JavaScript中new操作符详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的JavaScript中new操作符详解全部内容，希望文章能够帮你解决JavaScript中new操作符详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/295185.html

来源：【匿名】