iT邦幫忙

2021 iThome 鐵人賽

DAY 3
1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 3

JS 03 - 資料傳遞

大家好!

昨天的儲存容量和儲存裝置,有沒有更容易理解原始型別和物件型別的差異呢?
我們進入今天的主題吧!


傳遞行為

記得昨天有強調一句話嗎?

原始型別和物件型別的傳遞方式不同

沒錯,今天的主題就是這個!
至於什麼是資料的傳遞呢?舉例一下:

var a = 'str',
    b = a;
a === b; // true

上方都有進行資料的傳遞。
也就是說,只要有出現資料,就會有傳遞的行為

然而,不同的資料型別也有不同的傳遞方式,舉例一下:

('s' + 't' + 'r') === 'str'; // true
new String('s' + 't' + 'r') === new String('str'); // false

接下來我們就來理解傳遞方式的差異吧!


傳遞方式

JavaScript 只有原始型別和物件型別,因此也就只有 2 種不同的傳遞方式。
昨天我們提到:

前者(原始型別)建立的會是純值,後者(物件型別)建立的則是物件

既然原始型別是純值,那麼也就只能傳遞純值;同理,物件型別就是傳遞物件。

原始型別

var c = 5,
    d = c;
c === d; // true
c = c ** 2; // 25
c; // 25
d; // 5
c === d; // false

cd 傳遞的只有純值,因此 d = c 實際上就是 d = 5
這也是為什麼,當 c 被平方時,d 沒有被影響的原因。

物件型別

var e = [],
    f = e;
e === f; // true
e.push(0); // 1
e; // [0]
f; // [0]
e === f; // true

ef 傳遞的就是物件,因此 f 會指向 e 在記憶體中的位置。換句話說,f 實際上就是 e
這也是為什麼,當 e 推入 0 時,f 也會有 0 的原因。


有一次我不小心用迴圈無限宣告變數,導致記憶體近乎直線上升,最後只好無奈地將電腦強制關機。
但是,因為這次慘痛的經驗,也就理解了原理,畢竟如果每次 f = e 都是再建立一個新的物件,那麼現在的瀏覽器可能就不會有分頁的功能了。

差不多也到尾聲了。
如果對文章有任何疑問,歡迎於下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 02 - 資料型別
下一篇
JS 04 - 變數類型
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言