LHS 和 RHS

LHS 賦值操作的左側 Left Hand Side
RHS 賦值操作的右側 Right Hand Side

從一道題開始

下面這兩行代碼，哪一行會報錯？報什么錯？為什么？

x = 1
console.log(y)

更方便的理解

LHS 側重點在于賦值操作 可以理解為將值賦值給 = 左側的這個東西，這個東西是啥，我不關心，反正就在作用域里找他唄，這層找不到就往上找，最后找不到就在全局里面創(chuàng)建個就完事了，反正我要完成賦值操作

RHS 側重點在于查找 可以理解為我要找到這個變量啊，這個作用域里找不到就往上找，最后找不到難受到報錯 RefrenceError
然而，對于方法和對象，如果找到的類型不匹配，則會報TypeError。這兩個是非常常見的兩個錯誤。除此之外還有SyntaxError 等，可參考MDN

圖解

LHS.png

RHS.png

OK，練習一下。看如下代碼,最后a會怎么樣

a = (function add(num) {
  return function(num) {
    a = num
  }
})(5);

a(6)

a 

解析：

a = (function add(num) { // 1、一次對a的LHS操作，操作完后 a是個function
  return function(num) { // 4、num = 6的LHS隱式操作 
    a = num // 5、num RHS操作 和 a的LHS操作 此時將a賦值為6。
  }
})(5); // 2、發(fā)生了一次對add這個函數的 num = 5 的LHS操作以及一個隱式的RHS調用操作add(5)

a(6) // 3、對a的RHS操作，沒問題

a // 6 6、整段代碼執(zhí)行完畢，從1-6中涉及的所有RHS都完美找到，不會報錯

換個題咯，這次我直接標記順序解析了

a = (function add(num) { // 1、對a進行LHS
  var b
  return function(num) { // 4、num = 6 LHS
    b = num // 5、num RHS 以及 b = 6 的 LHS 最后在add的函數作用域內找到了b
  }
})(5); // 2、發(fā)生了一次對add這個函數的 num = 5 的LHS操作以及一個隱式的RHS調用操作add(5)

a(6) // 3、a RHS

b // 6、b 的RHS 找不到b 報 RefrenceError

在了解LHS和RHS之前，你可能對作用域的賦值了解，也知道這些題的答案。但是真正的運行機制以及什么情況下會報錯，會報什么錯誤在不了解LHS和RHS是不行的把

最后，再問你哪里會報錯？報什么錯？為什么？ 你會了嗎？

x = 1
console.log(y)

嚴格模式

在嚴格模式下，我們會發(fā)現(xiàn)LHS如果沒有查找到賦值對象也是會報錯的。

github地址 麻煩點個贊咯