JavaScript 核心觀念(2)-執行環境與作用域-執行的錯誤情境 LHS, RHS

前言

JavaScript 世界中出現 LHS, RHS 是一件很常見的事情,而這兩個名詞主要與取值及賦值有關。

LHS

LHS 全名是 Left-Head Side

而 Left-Head side 這個訊息的意思是賦予值到左側的變數上,最簡單的範例就是這樣 var a = 1; 將數字一賦予到 a 這個變數上。

那麼什麼時候會發生 LHS 錯誤呢?

舉例來講,當你賦予的值是 JavaScript 不正確時就會發生,例如字串賦予值。

1
'小明' = 1;

你只需要在瀏覽器的 devTools 輸入上方語法就會出現 SyntaxError: invalid assignment left-hand side debugger eval code:1

這邊透過前一篇使用的解析器可以看到相同的提示訊息

可是這邊額外做一件很特別的事情,如果是透過變數宣告的方式賦值呢?例如下方的程式碼

1
var '小明' = 1;

在這邊有一個很特別的狀況,你可能不會看到 Left-Head side 的錯誤訊息,以我目前測試的瀏覽器 Chrome 80.0.3987.149 是會出現這樣的錯誤訊息 Uncaught SyntaxError: Unexpected string

而在 Firefox 74.0(64 位元) 上則是 SyntaxError: missing variable name,這個提示問題的差異原因在於瀏覽器提供的執行環境提示訊息的不同,由此我們可以知道執行環境是很重要的觀念。

RHS

前面我們很難驗證 LHS 的錯誤訊息,那 RHS 呢?RHS 完整名稱為 Right-Head Side。

RHS 的意思是指取值是來自右側的變數上,那這個是什麼意思呢?讓我們透過一段程式碼了解。

1
2
var a = '小明';
console.log(a);

在這邊我們可以看到 console.log() 去取得右側的變數 a,然後顯示在 devTools 上。

當然 RHS 觀念可換另一種說法,RHS 會去引用、查詢的概念,而以下範例其實就是一個 RHS 查詢、引用概念,在一開始會先 LHS 賦予值,接下來到 var b 時,會去查詢、引用 a 的值來源並賦予到 b

1
2
var a = '小明';
var b = a;

但是 RHS 的錯誤訊息會稍微與 LHS 不同,因為 RHS 並不會直接顯示出 RHS 的錯誤,他只會出現類似「ReferenceError: a is not defined」這種的錯誤訊息。

當然在瀏覽器上的錯誤訊息也會有一點點小小差異

Chrome:VM226:1 Uncaught ReferenceError: a is not defined at <anonymous>:1:13
Firefox:ReferenceError: a is not defined

但是基本上若出現 XXX is not defined 就代表你這個變數還沒有被定義,所以不存在。

基本上如果有遇到上面的任何錯誤,都會建議一定要修正,否則程式碼是無法正常運作的,因為 JavaScript 一旦遇到錯誤就無法往後執行囉。

最後這邊補上課程章節講義。

執行的錯誤情境 LHS, RHS

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
當然你也可以成為 讚賞公民 每個月請我喝一杯咖啡,又或者是 一次性金額抖內

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ