JS基礎-連續賦值

引子

今天同事聊天羣裏發現了一道面試題(js基礎)，但答案基本沒有幾個能答對而且理解的很透徹的。

問題

var a = {n: 1};

var b = a;  

a.x = a = {n: 2};

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

先不說答案，可能有些人已經答錯了~

錯誤的答案

這多簡單!JS賦值運算右結合！那就分開算唄！

a = {n: 2}
a.x = a

而後錯誤的答案就這麼產生了，a.x = {n: 2}

正解

其實這道題看似簡單但仍是有一些繞，我依稀記得高中數學老師那句經典的口頭禪！
遇到難題：畫圖啊！
好吧，這句話可能我會受用一生，同時也送給看這篇文章的同窗，但願能給大家編程帶來一些新的思路。

var a = {n: 1};

var b = a;

• 畫圖

這句話也是關鍵所在

a.x = a = {n: 2};

• 畫圖

根據js引擎語法解析，會先去從左到右尋找有沒有未聲明的變量，若是有就把該變量提高至做用域頂部並聲明該變量。那麼恭喜js引擎他找到a.x這個屬性沒有聲明，那麼他會在{n: 1}這個內存區聲明一個x屬性等待賦值！

語法解析完成後，開始進行運算(ps：賦值運算),首先將a變量的指針指向了一個新的內存區{n: 2},那麼a變量脫離了對內存區{n: 1}的引用關係。

可是此時{n:1 }這個內存區並無被GC回收由於b變量的指針依然指向它。而且由於以前就聲明瞭x屬性因此該內存區
增長了X屬性。那麼X屬性指向哪兒呢？a.x = a = {n: 2}它的返回值就是{n: 2}的內存區。

以下圖：

那麼根據圖上可得:a.x 不存在,故: => undefined(ps：由於JS的缺陷這裏應當報個錯啥的~ Undefind reference)b.x => {n: 2}