重學前端學習筆記（三十二）--JavaScript的表達式語句

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，天天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的能夠加入winter的專欄學習【原文有winter的語音】，若有侵權請聯繫我，郵箱：kaimo313@foxmail.com。

1、什麼是表達式語句

表達式語句：就是一個表達式，它是由運算符鏈接變量或者直接量構成的。從語法上看，任何合法的表達式均可以當作表達式語句使用。

2、PrimaryExpression 主要表達式

表達式的原子項：Primary Expression。它是表達式的最小單位，它所涉及的語法結構也是優先級最高的。

2.一、直接量（Literal）

直接量：就是直接用某種語法寫出來的具備特定類型的值。通俗地講，直接量就是在代碼中把它們寫出來的語法。

"abc";
123;
null;
true;
false;

/* 還可以直接量的形式定義對象，有函數、類、數組、正則表達式等特殊對象類型。*/

({});
(function(){});
(class{ });
// function、{ 和 class 開頭的表達式語句與聲明語句有語法衝突，使用需加上括號來回避語法衝突。
[];
/abc/g;
複製代碼

2.二、其餘

一、Primary Expression 還能夠是 this 或者變量，在語法上，把變量稱做標識符引用。

this;
myVar;
複製代碼

二、任何表達式加上圓括號，都被認爲是 Primary Expression，這個機制使得圓括號成爲改變運算優先順序的手段。

(a + b)*c;
複製代碼

3、MemberExpression 成員表達式

Member Expression 一般是用於訪問對象成員的。

3.一、幾種形式

• 用標識符的屬性訪問和用字符串的屬性訪問。
• new.target 是個新加入的語法，用於判斷函數是不是被 new 調用。
• super 則是構造函數中，用於訪問父類的屬性的語法。

a.b;
a["b"];
new.target;
super.b;
複製代碼

3.二、帶函數的模板

表示把模板的各個部分算好後傳遞給一個函數。

f`a${b}c`;
複製代碼

3.三、帶參數列表的 new 運算

不帶參數列表的 new 運算優先級更低，不屬於 Member Expression。

new Cls();
複製代碼

4、NewExpression NEW 表達式

Member Expression 加上 new 就是 New Expression，（不加 new 也能夠構成 New Expression，JavaScript 中默認獨立的高優先級表達式均可以構成低優先級表達式）。

// 看個例子
new new Kaimo(666);

// 直觀上可能有兩種意思
new (new Kaimo(666)); or new (new Kaimo)(666);

// 實際上等價於第一種，能夠驗證一下

class Kaimo{
  constructor(n){
    console.log("kaimo", n);
    return class {
      constructor(n) {
        console.log("returned", n);
      }
    }
  }
}

new new Kaimo(666);
// kaimo 666
// returned undefined

new (new Kaimo(666));
// kaimo 666
// returned undefined

new (new Kaimo)(666);
// kaimo undefined
// returned 666
複製代碼

5、CallExpression 函數調用表達式

Member Expression 還能構成 Call Expression。它的基本形式是 Member Expression 後加一個括號裏的參數列表，或者能夠用上 super 關鍵字代替 Member Expression。

a.b(c);
super();

// 變體 能夠理解爲，Member Expression 中的某一子結構具備函數調用，那麼整個表達式就成爲了一個 Call Expression。
a.b(c)(d)(e);
a.b(c)[3];
a.b(c).d;
a.b(c)`xyz`;
複製代碼

6、LeftHandSideExpression 左值表達式

New Expression 和 Call Expression 統稱 LeftHandSideExpression，左值表達式。直觀地講，左值表達式就是能夠放到等號左邊的表達式。

a() = b;

// 原生的 JavaScript 函數，返回的值都不能被賦值。多數賦值將會是 Call Expression 的其它形式

a().c = b;
複製代碼

左值表達式最經典的用法是用於構成賦值表達式。

7、AssignmentExpression 賦值表達式

有多種形態，最基本的固然是使用等號賦值。

a = b
複製代碼

7.一、嵌套

a = b = c = d 等價於 a = (b = (c = d))
複製代碼

7.二、結合運算符

// *=、 /=、 %=、+=、-=、...
a += b; 等價於 a = a + b;
複製代碼

8、Expression 表達式

賦值表達式能夠構成 Expression 表達式的一部分。在 JavaScript 中，表達式就是用逗號運算符鏈接的賦值表達式。

// 比賦值運算優先級更低的就是逗號運算符（能夠把逗號理解爲一種小型的分號）
var a,b;
a = b, b = 1, null; // null

null,null+null  // 0
複製代碼

逗號分隔的表達式會順次執行，就像不一樣的表達式語句同樣。整個表達式的結果就是最後一個逗號後的表達式結果。

我的總結

愈來愈嗨了，刺激。。。