六角學院 JS 核心筆記 (十五)【運算子、型別與文法】- 優先性和相依性

發表於 更新於 分類於
AdSense

前言

優先性 Operator precedence：決定運算子運算或是說被語法解析的優先順序。
相依性 Associativity：當優先序相同時，使用相依性決定運算方向。

小學一定都學過最簡單的優先性和相依性概念：先乘除後加減。

優先性和相依性

賦值運算符 (Assignment operator) 為右相依性，其餘就直接參考：MDN - 運算子優先序。

陷阱題一

在優先順序中，… ++ 後置遞增運算子 (Postfix Increment) 優先於 ++ … 前置遞增運算子 (Prefix Increment)。並且相依性由左至右：

1
2
++a; // 先加 1，再回傳
a++; // 先回傳，再加 1

因此下方第二行的 ++a 是先將 10 加 1 賦值到 a，再回傳 a (也就是回傳 11)，變成 console.log(11 * a)。第二個 a 也是 11，因此變成 console.log(11 * 11)。

第四行依此類推，變成 console.log(9 * 9)。

1
2
3
4
let a = 10;
console.log(++a * a); // 輸出結果： 121
a = 10;
console.log(--a * a); // 輸出結果： 81

陷阱題二

之前六角學院 JS 核心筆記 (十)【運算子、型別與文法】- 陳述式與表達式有傳遞過一個觀念，所有的表達式都會回傳結果。值得注意的是，如果沒有變數接收這個回傳的值時，它就會立即被釋放，不會被儲存。

因為 writable: false 的特性，第七行的 a.test 不能接收賦予的新值，不會被改變，因此 a.test 還是 2。

第 11 行 a.test = 100 是表達式，回傳 = 右側的值，也就是回傳 100。 a.test 還是不會被改變。而後 b = 100，因此被賦值 100。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let a = {};
Object.defineProperty(a, "test", {
 value: 2,
 writable: false
});

a.test = 500;
console.log(a); // 輸出結果：{test: 2}

let b = 3;
b = a.test = 100;
// (a.test = 100) 是一個表達式，回傳 100

console.log(b);        // 輸出結果：100
console.log(a.test);   // 輸出結果：2

參考資料：
MDN - 運算子優先序
六角學院：JavaScript 核心篇 - 邁向達人之路