深入理解 JavaScript中的變量、值、傳參

endiat 發布于2019-08-23 14:07 / 1733人閱讀

摘要：所以說在中，也并不是一切都是對象原始類型值不可變原始類型的變量的值是不可變的，只能給變量賦予新的值。可以理解基本類型的變量的值，就是字面上寫的數值。有四個變量圖調用是傳參，內層的會屏蔽外層的。圖內層的的值被改變成的值被改變為。

1. demo

如果你對下面的代碼沒有任何疑問就能自信的回答出輸出的內容，那么本篇文章就不值得你浪費時間了。

var var1 = 1
var var2 = true
var var3 = [1,2,3]
var var4 = var3

function test (var1, var3) {
    var1 = "changed"
    var3[0] = "changed"
    var3 = "changed"
}

test(var1, var3)

console.log(var1, var2, var3, var4)

2. 深入理解原始類型

原始類型有5個 Undefinded, Null, Boolean, Number, String

2.1. 原始類型變量沒有屬性和方法

// 抬杠, 下面的length屬性，toString方法怎么有屬性和方法呢？
var a = "oooo"
a.length
a.toString

原始類型中，有三個特殊的引用類型Boolean, Number, String，在操作原始類型時，原始類型變量會轉換成對應的基本包裝類型變量去操作。參考JavaScript高級程序設計 5.6 基本包裝類型。

所以說：在js中，也并不是一切都是對象

2.2. 原始類型值不可變

原始類型的變量的值是不可變的，只能給變量賦予新的值。

下面給出例子

// str1 開始的值是aaa
var str1 = "aaa"
// 首先創建一個能容納6個字符串的新字符串
// 然后再這個字符串中填充 aaa和bbb
// 最后銷毀字符串 aaa和bbb
// 而不能理解成在str1的值aaa后追加bbb
str1 = str1 + "bbb"

其他原始類型的值也是不可變的, 例如數值類型的。

2.3. 原始類型值是字面量 3. 變量和值有什么區別？

不是每一個值都有地址，但每一個變量有。《Go程序設計語言》

變量沒有類型，值有。變量可以用來保存任何類型的值。《You-Dont-Know-JS》

變量都是有內存地址的，變量有用來保存各種類型的值；不同類型的值，占用的空間不同。

var a = 1
typeof a // 檢測的不是變量a的類型，而是a的值1的類型

4. 變量訪問有哪些方式？

變量訪問的方式有兩種：

按值訪問

按引用訪問

在JS中，五種基本類型Undefinded, Null, Boolean, Number, String是按照值訪問的。基本類型變量的值就是字面上表示的值。而引用類型的值是指向該對象的指針，而指針可以理解為內存地址。

可以理解基本類型的變量的值，就是字面上寫的數值。而引用類型的值則是一個內存地址。但是這個內存地址，對于程序來說，是透明不可見的。無論是Get還是Set都無法操作這個內存地址。

下面是個示意表格。

語句	變量	值	Get	訪問類型
var a = 1	a	1	1	按值
var a = []	a	0x00000320	[]	按引用

抬杠 Undefinded, Null, Boolean, Number是基本類型可以理解，因為這些類型的變量所占用的內存空間都是大小固定的。但是string類型的變量，字符串的長短都是不一樣的，也就是說，字符串占用的內存空間大小是不固定的，為什么string被列為按值訪問呢？

基本類型和引用類型的本質區別是，當這個變量被分配值時，它需要向操作系統申請內存資源，如果你向操作系統申請的內存空間的大小是固定的，那么就是基本類型，反之，則為引用類型。

5. 例子的解釋

var var1 = 1
var var2 = true
var var3 = [1,2,3]
var var4 = var3

function test (var1, var3) {
    var1 = "changed" // a
    var3[0] = "changed" // b
    var3 = "changed" // c
}

test(var1, var3)

console.log(var1, var2, var3, var4)

上面的js分為兩個調用棧，在

圖1 外層的調用棧。有四個變量v1、v2、v3、v4

圖2 調用test是傳參，內層的v1、v3會屏蔽外層的v1、v3。內層的v1,v3和外層的v1、v3內存地址是不同的。內層v1和外層v1已經沒有任何關系了，但是內層的v3和外層v3仍然指向同一個數組。

圖3 內層的v1的值被改變成"changed‘, v3[0]的值被改變為"changed"。

圖4 內層v3的值被重寫為字符串changed, 徹底斷了與外層v3聯系。

圖5 當test執行完畢，內層的v1和v3將不會存在，ox75和ox76位置的內存空間也會被釋放

最終的輸出：

1 true ["changed", 2, 3] ["changed", 2, 3]

6. 如何深入學習JS、Node.js

看完兩個stackoverflow上兩個按照投票數量的榜單

JavaScript問題榜單

Node.js問題榜單

如果學習有捷徑的話，踩一遍別人踩過的坑，可能就是捷徑。

7. 參考

is-javascript-a-pass-by-reference-or-pass-by-value-language

Is number in JavaScript immutable? duplicate

Immutability in JavaScript

the-secret-life-of-javascript-primitives

JavaScript data types and data structuresLanguages Edit Advanced

Understanding Javascript immutable variable

Explaining Value vs. Reference in Javascript

You-Dont-Know-JS

《JavaScript高級程序設計（第3版）》[美] 尼古拉斯·澤卡斯

掃碼訂閱我的微信公眾號：洞香春天。每天一篇技術短文，讓知識不再高冷。

云服務器 GPU云服務器深入理解javascript 深入理解系列深入理解linux 深入理解webrtc

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

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

關于JavaScript 函數傳參

摘要：最早由在年的語言中提出。該求值策略被用于等多種語言。該策略的重點是調用函數傳參時，函數接受對象實參引用的副本既不是按值傳遞的對象副本，也不是按引用傳遞的隱式引用。它和按引用傳遞的不同在于在共享傳遞中對函數形參的賦值，不會影響實參的值。周五晚上下班回家的路上，突然想到了 CommonJS 規范、Node.js 模塊化等等各種東西，然后就想到了熟悉的 module.exports。大約...

CloudwiseAPM 2019-08-19 18:37 評論0 收藏0
圖解JavaScript的參數傳遞

摘要：寫在最前本次嘗試通過流程圖的形式并結合兩個例子來重新理解一下中的參數傳遞。歡迎關注我的博客，不定期更新中參數到底如何傳遞借用紅寶書的一句話中所有函數的參數都是按值傳遞的這個值如果是簡單類型，那么就是其本身。同時執行第一個結果即為。寫在最前本次嘗試通過流程圖的形式并結合兩個例子來重新理解一下JavaScript中的參數傳遞。歡迎關注我的博客，不定期更新中—— 參數到底如何傳遞？借...

Berwin 2019-08-21 18:34 評論0 收藏0
call by sharing——JavaScript中“共享傳參”和“按值傳參”的理解

摘要：眾所周知，中參數是按值傳遞的。先大概介紹按值傳參基本類型基本類型的參數傳遞比較簡單，示例代碼的值復制給了函數內部的局部變量所以在函數內部改變的值并不會影響外部的值。眾所周知，JavaScript中參數是按值傳遞的。與訪問變量不同，基本類型和引用類型的參數在傳遞時都如同變量的復制。但是我們在使用引用類型的參數傳遞時，經常會發現在函數內改變引用類型參數（如對象）會在函數外反映出來，這種...

jsdt 2019-08-19 18:23 評論0 收藏0
《深入理解ES6》筆記——函數（3）

摘要：錯誤的寫法錯誤的寫法中的構造函數新增了支持默認參數和不定參數。箭頭函數的簡單理解箭頭函數的左邊表示輸入的參數，右邊表示輸出的結果。但是有了尾調用優化之后，遞歸函數的性能有了提升。作為前端切圖仔，越發覺得自己離不開函數了。說到JavaScript函數，腦子里都是匿名函數、普通函數、閉包函數、構造函數......然后還能說出一大堆函數的概念。如果你達到這個水平，那么函數對你來說沒有難度...

DoINsiSt 2019-08-20 18:04 評論0 收藏0