當我們在JavaScript中new一個對象的時候，我們到底在做什么

woshicixide 發布于2019-08-26 11:39 / 1929人閱讀

摘要：當構造函數沒有顯式地返回一個值的時候，對其執行操作之后，會返回這個構造函數實例化之后的對象。

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之后返回的還是實例化之后的對象。

GPU云服務器云服務器云主機在我們工作中的應用我們的服務器在日本我們的服務器在韓國我們的服務器在印尼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107297.html

繼承與原型

摘要：既然構造函數有屬于自己的原型對象，那么我們應該能讓另一個構造函數來繼承他的原型對象咯我們在構造函數內部執行了函數并改變了函數內部的指向其實這個指向的是實例化之后的對象。我們在討（mian）論（shi）JavaScript這門語言時，總是繞不過的一個話題就是繼承與原型鏈。那么繼承與原型鏈到底是什么呢？我很喜歡的一個聊天模式是：我不能說XX是什么，我只能說XX像什么。也就是說我不直接跟...

My_Oh_My 2019-08-26 11:40 評論0 收藏0
使用 new 操作符內部到底在做什么

摘要：把方法移動到構造函數外部把方法移至外面，這樣每次實例化內部的只是全局的引用，這樣避免了重復。構造函數什么體內什么都沒有，如果有叫做實例方法，實力屬性缺點重復敲，造成大量的重復輸入。從對象聲明開始一步步介紹 1.普通對象聲明首先創建自定義對象的最簡單方式就是創建一個Object的實例，然后在為他們添加屬性和方法，如下所示： var person = new Object(); ...

curlyCheng 2019-08-22 16:39 評論0 收藏0
用愚公移山說明Javascript創建對象的各種姿勢

摘要：北山愚公者年且九十面山而居。工廠模式愚小公北山愚小小公北山工廠模式比較明顯的一個缺點就是由于生成并返回了一個中間對象，所以不能判斷對象的類型。 ??太行、王屋二山,方七百里,高萬仞。本在冀州之南,河陽之北....... ??嗯，按照慣例，第一句話就是騙你們點進來的。在讀本文之前，希望你對Javascript的原型和原型鏈有一定了解，這有助于你更好的理解本文，之前有寫過一篇相關文章，點此...

cartoon 2019-08-26 11:59 評論0 收藏0
What's New in JavaScript

摘要：在和中都保留了數組的強引用，所以在中簡單的清除變量內存并沒有得到釋放，因為還存在引用計數。而在中，它的鍵是弱引用，不計入引用計數中，所以當被清除之后，數組會因為引用計數為而被回收掉。其實我們主要注意的引用是不計引用計數的，就好理解了。 showImg(https://segmentfault.com/img/remote/1460000019147368?w=900&h=383); 前...

cgh1999520 2019-08-26 13:44 評論0 收藏0
JavaScript 中的 new 到底干了什么，跟原型鏈又有一些什么聯系？

摘要：原文如果按面向對象的思路去講的，還是很難去理解，我們可以從另一個方向去理解一下它。原文：https://legacy.ofcrab.com/press/javascript-new.html 如果按面向對象的思路去講 JavaScript 的 new，還是很難去理解，我們可以從另一個方向去理解一下它。你這些人類我是一名程序員，也是一個人，我可能：有一個響亮亮的名稱在某一天出...

Cympros 2019-08-23 17:00 評論0 收藏0