原始型別(傳值By Value ) v.s 物件型別(傳參考By Reference)


JS兩大型別:

基本型別

  1. number
  2. string
  3. boolean
  4. undefined
  5. null
  6. symbol
  7. bigInt

物件型別(其餘則是歸類在物件)

  • Object literal
  • Arrays
  • Functions
  • Many more...

記憶體 與 記憶體內存管理

JS引擎有兩大組件:call stack 與 heap

  • the call stack: where functions are executed.
  • heap: where objects are stored in memory.
  • 主要是基於下述兩者存在記憶體的方式不同
    ### primitives type 基本(純值)型別
      * primitives type 存在the call stack,也就是存在他們被宣告的執行文本(execut)之中 
    

objects reference type 物件參考型別

    * reference type 存在heap    

搭配圖:基本型別的保存方式是「按值 (by value)」

  • 說明:
    • 當我們聲明一段變數,如圖:
    • let age = 30;其會在call stack中創建唯ㄧ標識符-也就是變數:age
    • 然後,記憶體會先分派一小片段的“位址:如0001“給這個age變數
    • 最後,value 30會存在這個0001的位址
    • 然而,這裡有一個很重要的觀念是,這個標識符-變數會指向“addresss 0001”,而不是直接指向值本身,不過一般而言我們仍會用這段話:30這個值賦予給age這個變數,來描述這個賦予值的過程
    • 但是真相大白:事實上,age是是等同於memory address 0001本身,而這個memory address 0001存有value 30

* 徹底了解變數是指向記憶體位址是很重要的觀念
* let oldAge = age;也是一樣道理,oldAge會指向age所指向的記憶體位置0001

  • 當age 又重新賦值 age = 31;那age這個變數就會重新指向記憶體位置0002,而這個位址存有值31

搭配圖:物件是「按址 (by reference)」

  • 說明:
    • 當我們創建const my = {...} 物件,這個物件內容會存在js engine:heap中,並且有一個address D30F
    • 而其變數my則會一樣在call stack唯一標識符變數上,並且指向記憶體位置0003並存有D30F這個值,而這個值不是primitives純值,而是reference-參考位址,也就是物件內容存在heap的Address D30F

  • 而const friend = my; friend變數和my指向的記憶體位置0003是一樣的,也就是存有D30F這個值,也是物件內容存儲在heap的參考位置
  • 由此可知,friend和my指向同一個物件內容

  • friend和my指向同一個物件內容
  • 當const friend.age = 27;因為friend和my指向記憶體位置0003,存有的值是my物件內容存在heap的參考位置D30F,因此當friend.age屬性值改變了,它和my的物件內容是同一個資料,因此my在heap指向的位置正是同一個物件內容
  • const常數不是不能重新賦值嗎?這個規則只適用primitives type,因為,friend所指向的記憶體位置0003的值D30F並沒有被改/重新賦值,仍然是物件內容在heap的參考位置D30F
  • 相比於原型型別,當你存放的是物件參照位址時,變數本身是不知道物件內容的,變數只知道如何取得物件,若你需要進一步操作物件,你必然會透過 . 來呼叫物件的屬性或方法

結論: 原始型別是 copying by value,而物件是 copying by reference

可以使用 const 來宣告物件

需注意資料會在什麼時候被更新

筆記內容-<udemy-2022 the complete javascript course 2022- from zero to mastery>

#js #call by value #call by reference #Udemy







你可能感興趣的文章

金魚都能懂的這個網頁畫面怎麼切 — 學習筆記01

金魚都能懂的這個網頁畫面怎麼切 — 學習筆記01

MTR04_1111

MTR04_1111

Day03  自製收費廣告版位 - 使用 react-intersection-observer

Day03 自製收費廣告版位 - 使用 react-intersection-observer






留言討論