当我们在JavaScript中new一个对象的时刻，我们到底在做什么

2024年5月16日 209次阅读 来源: hubery

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`指向foo
Foo.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以后返回的照样实例化以后的对象。

    原文作者：hubery
    原文地址: https://segmentfault.com/a/1190000013174017
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞