JS Advanced --pass by value && pass by reference && pass by sharing


Posted by s103071049 on 2021-07-27

概念前測-和你想的一樣嗎?

function changeStuff(num, obj1, obj2) {
  num = num * 10
  obj1.item = 'changed'
  obj2 = {item: 'changed'}
}

var num = 10
var obj1 = {item: 'unchanged'}
var obj2 = {item: 'unchanged'}
changeStuff(num, obj1, obj2)

console.log(num) // 10
console.log(obj1) // { item: 'changed' }
console.log(obj2) // { item: 'unchanged' }

pass by value

  • primitive types 是 pass by value
var num = 3
console.log('num start :"', num) // 3
function passByValue(func_num) {
  func_num = 5
  return func_num
}
passByValue(num)
console.log('num end :', num) // 3 
console.log(passByValue(num)) // 5

  1. var num = 3,宣告變數 num 他的 value = 3

  2. console.log('num start :"', num) 印出 3

  3. 宣告一個函式 passByValue,其中引數為 func_num,他的 value = 5

  4. 呼叫 passByValue函式

  5. 拷貝 value 3 到 func_num,此時引數 func_num,他的 value = 3

  6. 在 passByValue函式,執行 func_num = 5,此時引數 func_num,他的 value = 5 (overrode the copy that you passed into your pass by value function)

  7. console.log('num end :', num) 印出 3

pass by reference

var obj1 = {item: 'unchanged'}
console.log('obj1 start :"', obj1) // obj1 start :" { item: 'unchanged' }
function passByReference(ref) {
  ref.item = 'changed'
  return ref
}
passByReference(obj1)
console.log('obj1 end :', obj1) // obj1 end : { item: 'changed' }
console.log(passByReference(obj1)) // {item: 'changed'}

  1. var obj1 = {item: 'unchanged'},宣告 obj1,obj1 對應到記憶體位置是 0x0016,0x0016 指向的 value 是 {item: 'unchanged'}

  2. 宣告 function passByReference

  3. 呼叫 passByReference

  4. 因為 js objective types 是 pass by reference,所以拷貝過去的不是 obj1 記憶體位置指向的 value 而是記憶體位置 0x0016 (仔細想想,這仍是 pass by value,只是 pass 過去的變成了 address。)

  5. passByReference 的引數 ref 對應到的記憶體位置是 0x0016,0x0016 指向的 value 是 {item: 'unchanged'}

  6. ref.item = 'changed',這邊在做的事是:dereference the address,去到這個記憶體位置 0x0016 然後依照他指向的 value 去找 item,將他的內容改為 changed。如果找不到就在 value 裡面進行新增。update the original variables we have

  7. 因為對 obj1 而言,他的記憶體位置是 0x0016,他指向的 value 現在被改變,所以 log 出的結果就會是 {item: 'changed'}

pass by sharing

var obj1 = {items: 'unchanged'}
console.log('obj1 start :"', obj1) // obj1 start :" { item: 'unchanged' }
function passBySharing(ref) {
  ref = {item: 'changed'}
  return ref
}
passBySharing(obj1)
console.log('obj1 end :', obj1) // obj1 end : { item: 'unchanged' }
console.log(passBySharing(obj1)) // {item: 'changed'}

  1. var obj1 = {item: 'unchanged'},宣告 obj1,obj1 對應到記憶體位置是 0x0016,0x0016 指向的 value 是 {item: 'unchanged'}

  2. 宣告 passBySharing function

  3. 拷貝記憶體位置 0x0016 到 passBySharing,現在引數 ref 對應到的記憶體位置是 0x0016 其中 0x0016 指向的 value 是 {items: 'unchanged'}

  4. 執行 ref = {item: 'changed'},也就是 overridding our memory address。現在 ref 對應到的記憶體位置是 0x0017,其中 0x0017 指向的 value 是 {items: 'changed'}。there's no way to dereference a full objects in js with other language like C++ that is actaully deferencing operator that you can grab access to a full object but you can't do that with JS. JS only allows you to set property items on the objects that you are passing in.

  5. 因為 obj1 對應到的記憶體位置是 0x0016,0x0016 指向的 value 是 {item: 'unchanged'},所以 log 出的是 obj1 end : { item: 'unchanged' }

參考資料:
Tech Talk: Pass By Sharing with Javascript


#Tech Talk: Pass By Sharing with Javascript #pass by value #pass by reference #pass by sharing







Related Posts

【React Router】初次認識 React Router:基本使用

【React Router】初次認識 React Router:基本使用

Day 144

Day 144

Day03 運籌帷幄

Day03 運籌帷幄


Comments