首頁  >  文章  >  web前端  >  JavaScript中new運算子詳解

JavaScript中new運算子詳解

小云云
小云云原創
2018-02-07 14:43:241667瀏覽

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運算子詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn