欣迪

題目如下:

let a = { n : 1}
let b = a

a.x = a = {n: 2}

// 寫出以下結果

console.log(a)
console.log(b)
console.log(a.x)

這題看到確實心裡滿滿的 WTF!?
正常人會這樣寫嗎!! 但這是題目,用極端的方法來測試你的觀念是否正確。
好吧! 我們來好好的解構這題吧。

Js 使用的是右結合的賦值運算符,所以它們會以下列順序執行:

  1. 建立了 a 物件 { n: 1 }
  2. b = a ,也就是說 b 和 a 指向同一個空間 , 也就是說在不建立新 Object 的前提下, a b 的參數是連動的。
  3. a.x = … , a.x 被建立了,等到右邊有結果就會被賦值。
  4. 先看右邊 a = { n: 2 } ,好樣的! a 變成了一個新物件賦值 { n: 2 }。 原本的 a 不見了。 a 被指向另一個物件, 所以 a.x 不存在。
  5. 但是由於 b 仍然指向一開始的 a , 所以 b.x 指向了 { n: 2 }

結果出現了:

let a = { n : 1}
let b = a

a.x = a = {n: 2}

// 寫出以下結果

console.log(a) // { n: 2 }
console.log(b) // { n: 1, x: { n: 2} }
console.log(a.x) // undefined

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚
Loading

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。