JS連等賦值的坑

2022-03-03 05:34:14 字數 2652 閱讀 4012

關於js連等賦值有個經典的筆試題:

var a = ;

var b = a;

a.x = a = ;

console.log(a.x); // --> undefined

console.log(b.x); // -->

咋一看, 一臉懵逼, 這都什麼玩意. 我一開始也是這個想法, 不過理解之後發現, 不是題目坑,

確實自己水平還不到位. 本文先介紹理解上述筆試題需要的知識點, 然後對該筆試題詳細分析.

形如a = b的表示式被稱為賦值表示式, 其中a和b又分別可以是表示式, b可以是任意表示式,

而a必須是可以被賦值的表示式. 最關鍵的是我們要理解js引擎是如何解析賦值表示式的:

先計算表示式a, 得到乙個引用refa;

再計算表示式b, 得到乙個值valueb;

將valueb賦給refa指向的位置;

return valueb;

這4個步驟最核心的是規定了,必須先計算a, 再計算b. 我們在文末分析筆試題就會看到.

a1 = a2 = a3 = a4, 知道單個賦值表示式的解析邏輯, 多個連等賦值就很容易類推. 出現

多個連等, 我們完全可以給它分解成單個等號的形式. 比如上式可以分解成下面這樣:

a1 = (a2 = a3 = a4), 左邊的a1看成單個賦值表示式中的a, 右邊整體看成b. 繼續分解,

最終得出這樣a1 = (a2 = (a3 = a4)). 因此這個連等的按步驟執行如下:

依次計算a1, a2, a3, 分別得到refa1, refa2, refa3;

計算a4得到valuea4, 把valuea4賦給a3;

把(a3 = a4)這個賦值表示式的返回值, 也就是value4賦給a2;

把(a2 = (a3 = a4))這個賦值表示式的返回值, 也就是value4賦給a1;

大家不要矇圈, 就在腦中這樣想,先計算左後計算右. 左邊就單個a1, ok直接計算. 來到右

邊發現沒法直接計算, 那麼就把右邊再分成左右, 按照這種思路迴圈遞推就行.

和學二叉樹時候的思路, 簡直如出一轍.

var a = ;

var b = a;

a.x = a = ;

console.log(a.x); // --> undefined

console.log(b.x); // -->

你可能會發現, 現在貌似還是不理解上面的**到底發生了什麼, 說明對js中引用賦值, 理解還不

夠透徹.

上面總共5行**, 按順序編號1-5.

首先執行前2行**, 我們腦中大致有這樣的圖.a --> [ ] <--b, 說這是圖太勉強, 大家

將就看_. 這個圖中間的表示這是個盒子, 盒子裡面裝有這個物件,ab都指向這個

物件.接下來, 到了全文最關鍵的時刻. 按照我們前面的分析, 第3行**先執行a.x, 這時候我們上面的

的圖已經發生變化了, 變成這樣a --> [ ] <--b, 我們的x同學已經準備好了, 等著

別人給它賦值呢.

再接著執行a, 我們的圖沒發生變化.

在接著執行, 大家注意這可是我們全新召喚出來的盒子, 盒子裡面裝有資料. 該

盒子和前面的盒子沒有任何關係(到目前為止).

為了方面我們就把第一次出現的盒子叫做盒子1, 第2次出現的的字叫做盒子2. 現在我們把盒子2賦給

a, 我們的腦中將出現2個圖. 圖1[ ] <--b, 圖2a --> [ ]. 也就是說

a已經指向了盒子2, 而b仍舊指向盒子1.

我們把a =這個表示式的返回值賦給x同學, 對就是x,x一直在等著呢, 現在

沒有a什麼事了. 最終我們的圖變成了這樣, 圖1[ } ] <--b,

圖2a --> [ ].

我們上述6個步驟圖的變化單門拿出來:

a --> [  ] <--b

a --> [ ] <--b

[ ] <-- b

a --> [ ]

// 最終圖

[ } ] <--b

a --> [ ]

現在讓我們輸出什麼, 我們就能輸出什麼.

console.log(a.x);   // a現在指向的盒子2, 盒子2裡沒有x, 輸出undefined

console.log(b.x.n); // 2

JS連等賦值的坑

關於js連等賦值有個經典的筆試題 var a var b a a.x a console.log a.x undefined console.log b.x 咋一看,一臉懵逼,這都什麼玩意.我一開始也是這個想法,不過理解之後發現,不是題目坑,確實自己水平還不到位.本文先介紹理解上述筆試題需要的知識點...

js連等賦值

賦值前 賦值後 運算子優先於 賦值運算,先建立 a.x是乙個位址,a也是乙個位址,a.x建立後,也就有了b.x,它們是同乙個位址 js賦值是右結合的,從右邊開始向左邊賦值,先將賦值給位址a,再將賦值給位址a.x 其實也是b.x,它們是同乙個位址 另乙個解釋 解析器在接受到 a.x a 這樣的語句後,...

JS中連等賦值的個人理解

var a var b a a.x a console.log a.x undefined console.log b.x 如上,a.x 是 undefined b.x 是 為什麼會這樣呢,我個人理解是這樣的。先把 的記憶體位址看作 位址e 的記憶體位址看作 位址f 瀏覽器在看到 a.x a 這條語...