JS淬煉: Primitive vs. Object

Hancock_Xu 發布于2019-08-20 12:24 / 1189人閱讀

摘要：值傳遞引用傳遞是值傳遞，是引用傳遞。但這影響會根據父類是屬于還是而有微妙差別。我們設想有一個父類，和兩個繼承了他的子類和。這時，子類修改該不會影響到父類本身，更不會傳遞到其他子類上。

Javascript有兩種基本數據類型，Primitive和Object。Object是properties的聚合，其property可以是Object也可以是Primitive。Primitive只有value, 沒有properties。

Javascript有五種Primitive:

string

number

boolean

null

undefined

除了null和undefined，其余Primitive都有對應的Object封裝，如Object String對應string。

Stack vs. Heap

Javascript是一門動態語言，同一個變量在不同時候可能被賦予不同數據類型，比如前面是number而后面變成Object。所以Javascript變量值所占用的內存空間應該是可以動態變化的。

var a = 10;
a = {};

實際上，不管是Primitive還是Object，這些Javascript變量的值都存儲在可以動態分配空間的heap上。而它在stack上保存的則是一個固定size的包含該值所在heap位置信息的引用（類似pointer）。JS engine通過對引用指向的修改來實現同一個變量指向不同的數據類型。

It"s wrong to state that primitives are allocated from the stack and only objects are allocated from the heap. This is the biggest difference between C and JavaScript.

最新的JS engine做了很多優化，使得內存分配更為高效但也更為復雜，具體可參考該StackOverflow回答。

值傳遞 vs. 引用傳遞

Primitive是值傳遞（passed by value），Object是引用傳遞（passed by reference）。

上面說到，Javascript變量在stack保存的是地址引用，為什么又說Primitive是值傳遞呢？Javascript中所有Primitive都是immutable的。在傳遞Primitive時，JS engine在heap上復制一個值相同的Primitive，然后把新變量的引用傳遞出去，這就是所謂JS中的值傳遞。對于Object，JS engine并不會復制一個新的Object，而是直接傳遞它的地址引用（與C++/Java中的引用傳遞類似）。

該引用能識別其指向的變量是Primitive還是Object，所以它不是一個簡單的pointer，而是包含所指向變量類型信息的“智能引用”。

對Prototype影響

在Javascript中，子類修改父類的property會影響到所有繼承該父類的子類。但這影響會根據父類property是屬于Primitive還是Object而有微妙差別。

我們設想有一個父類father，和兩個繼承了他的子類son1和son2。

var father = {
    primitive: 1,
    object: {
        fruit: "APPLE"
    }
};

var son1 = Object.create(father);
var son2 = Object.create(father);

Primitive Property

如果父類的property是Primitive，該property通過passed by value傳遞到子類。這時，子類修改該property不會影響到父類本身，更不會傳遞到其他子類上。

console.log("father"s primitive is " + father.primitive);
console.log("son1"s primitive is " + son1.primitive);
console.log("son2"s primitive is " + son2.primitive);
// father"s primitive is 1
// son1"s primitive is 1
// son2"s primitive is 1

son1.primitive = 2;

console.log("father"s primitive is " + father.primitive);
console.log("son1"s primitive is " + son1.primitive);
console.log("son2"s primitive is " + son2.primitive);
// father"s primitive is 1
// son1"s primitive is 2
// son2"s primitive is 1

Object Property

如果父類的property是Object，該property通過passed by reference傳遞到子類上。子類修改該property會通過父類傳遞到所有繼承它的子類上。

console.log("father"s fruit is " + father.object.fruit);
console.log("son1"s fruit is " + son1.object.fruit);
console.log("son2"s fruit is " + son2.object.fruit);
// father"s fruit is APPLE
// son1"s fruit is APPLE
// son2"s fruit is APPLE

son1.object.fruit = "GRAPE";

console.log("father"s fruit is " + father.object.fruit);
console.log("son1"s fruit is " + son1.object.fruit);
console.log("son2"s fruit is " + son2.object.fruit);
// father"s fruit is GRAPE
// son1"s fruit is GRAPE
// son2"s fruit is GRAPE

Reference

Primitive value vs Reference value
How variables are allocated memory in Javascript?

云服務器 GPU云服務器 object()js js+object+添加數據 js打印object js解析object

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

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

JS淬煉: Array進階

摘要：的這種實現方式導致了一些尷尬問題，比如刪除元素元素遍歷。后面的參數被忽略掉了，表示并沒有要插入的元素。其實，的本質是跟蹤中的，并始終保持值是。這時候，雖然不大可能，可能會在中間某個中被用戶重新定義。但是在上進行這種操作是很糟糕的。在Javascript中，array是一個類數組的object。顧名思義，它能夠在一個變量上存儲多個值。數組是值的有序集合。每個值叫做一個元素，而每個元素...

jimhs 2019-08-22 10:45 評論0 收藏0
關於 Javascript {} + {}

摘要：於是其他的東西相加的時候將會被轉型成數字或者字串。整個過程即先依據轉換為原始型別，這裡要注意並不是最終結果，再來依據需要看是否要再將原生型別轉成數字或字串。這個結果等於只作的算。這篇文章源自 What is {} + {} in JavaScript? 其實早在 2012 年就問世了。時至 2016 年末純粹是在聊天時重提這個問題，但由於年紀大了記憶力不佳，竟然記錯了，所以才會有這一...

charles_paul 2019-08-21 11:24 評論0 收藏0
JS淬煉: Syntax Parser

摘要：語法分析利用詞法分析的結果建立上下文關系語法樹。一般情況下，我們不會直接和語法樹打交道，但會在進行代碼壓縮語法高亮重編譯關鍵字匹配和作用域判斷時間接涉及到。傳統的引擎直接根據語法樹的的結果進行解釋執行，導致效率比較為低下。一門語言的執行，大致經歷下面這些過程：詞法分析 -- 語法分析 -- 語義分析 -- 中間代碼生成 -- 優化代碼 -- 代碼生成。在Javascript中，Sy...

wuaiqiu 2019-08-22 10:45 評論0 收藏0
Learning Notes - Understanding the Weird Parts of

摘要：標簽前端作者更多文章個人網站 Learning Notes - Understanding the Weird Parts of JavaScript 標簽：前端 JavaScript [TOC] The learning notes of the MOOC JavaScript: Understanding the Weird Parts on Udemy,including...

inapt 2019-08-20 16:19 評論0 收藏0
JS中將變量轉為字符串

摘要：將與空字符串相加，即可將其轉換為字符串。這兩者是非常不同的事實上，將作為構造函數使用并不常見，因此僅使用它來轉換字符串就好了。這就意味著兩者的計算過程是這樣的返回值，然后使用轉換為字符串。譯者按: 語言的細枝末節了解一下就可以了，不需要太較真，不過如果一點也不知道的話，那就不太妙了。原文: Converting a value to string in JavaScript 譯...

Alex 2019-08-21 16:50 評論0 收藏0