快速理解 JavaScript 中的 LHS 和 RHS 查詢的用法
JavaScript 程序中的一段源代碼在執(zhí)行之前會經(jīng)歷三個步驟,統(tǒng)稱為 編譯
- 分詞/詞法分析
- 解析/語法分析
- 代碼生成
先看原書對一個賦值操作的拆解說明:
變量的賦值操作會執(zhí)行兩個動作,首先編譯器會在當前作用域中聲明一個變量(如果之前沒有聲明過),然后在運行時引擎會在作用域中查找該變量,如果能夠找到就會對它賦值。 --- 《你不知道的JavaScript(上卷)》 P7
而要講的 LHS 和 RHS 就是上面說的對變量的兩種查找操作,查找的過程是由作用域(詞法作用域)進行協(xié)助,在編譯的第二步中執(zhí)行。
LHS 和 RHS
- 字面意思其實是
Left Hand Side和Right Hand Side即左手邊和右手邊 - 一般可以理解為
賦值操作的左側和右側
先看個例子一
console.log(a);
這里對 a 是一個 RHS 引用,因為 a 并沒有賦予任何值,目的是為了取到 a 的值并打印出來。
a = 2;
這里對 a 是一個 LHS 引用,因為實際上我們不關心當前的值是什么,只是想要把 a 賦值為 2。
再看例子二
function foo(a) {
console.log(a); // 2
}
foo(2);
- 最后一行foo(..)函數(shù)的調(diào)用需要對 foo 進行 RHS 引用,意味著是取到 foo 的值,并且 (..)意味著 foo 需要被執(zhí)行,因此它最好是一個函數(shù)類型的值
- 其中有一個容易被忽略的隱式賦值操作 a = 2,它發(fā)生在 2 被當做實參傳入 foo 中時。即實參 2 傳給了形參 a,需要一個 LHS 查詢
- console 那一行還有對 a 的一次 RHS 引用(或者叫查詢),同時console.log(..)本身也需要一個 RHS 引用,即對 console 對象進行 RHS 查詢,并且檢查得到的值中是否有一個叫做 log 的方法。
- 書中有一段引擎和作用域的對話,有助于很好的理解例子二,see YDKJS github
小測驗
function foo(a) {
var b = a;
return a + b;
}
var c = foo(2);
試試找出其中的3處 LHS 查詢,4處 RHS 查詢
答案:
LHS 查詢:
c = ..;
a = 2(隱式變量分配)
b = ..
RHS 查詢
foo(2..
= a;
a ..
.. b
小結
參考原書中文版P12,英文版見 github
- 作用域是一套規(guī)則,用于確定在何處以及如何查找變量(標識符)。
- 如果查找的目的是對變量進行賦值,就會使用 LHS 查詢;如果目的是獲取變量的值,就會用 RHS 查詢。
- 賦值操作會導致 LHS 查詢。 = 操作符或調(diào)用函數(shù)時傳入?yún)?shù)的操作都會導致關聯(lián)作用域的賦值操作, 即都會導致 LHS 查詢。
- JavaScript 引擎首先會在代碼執(zhí)行前對其進行編譯,在這個過程中,像var a = 2 這樣的聲明會被分解成兩個獨立的步驟:
- 首先,var a在其作用域中聲明新變量。這會在最開始的階段,也就是代碼執(zhí)行前進行。
- 接下來,a = 2會查詢(LHS查詢)變量 a 并對其進行賦值。
- LHS 和 RHS 查詢都會在當前執(zhí)行作用域中開始,如果有需要(也就是說它們沒有找到所需的標識符),就會向上級作用域繼續(xù)查找目標標識符,這樣每次上升一級作用域,最后到達全局作用域,無論找到或沒找到都將停止。
- 不成功的 RHS 引用會導致拋出 ReferenceError 異常。不成功的 LHS 引用會導致自動隱式地創(chuàng)建一個全局變量(非嚴格模式下),該變量使用 LHS 引用的目標作為標識符,或者拋出 ReferenceError 異常(嚴格模式下)。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript解決innerText瀏覽器兼容問題思路代碼
innerText瀏覽器兼容這塊始終都是一個問題,下面與大家分享下使用javascript解決,感興趣的朋友可以參考下哈,希望對你有所幫助2013-05-05
使用weixin-java-miniapp配置進行單個小程序的配置詳解
這篇文章主要介紹了使用weixin-java-miniapp配置進行單個小程序的配置詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能完整示例
這篇文章主要介紹了Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能,結合完整實例形式分析了Bootstrap前端登錄頁面帶驗證碼界面布局與功能實現(xiàn)相關操作技巧,需要的朋友可以參考下2020-03-03

