淺聊一下JavaScript中的LHS和RHS查詢
前言
在日常編碼中,我們通常關(guān)注代碼的邏輯和功能,但很少深入思考編譯器在幕后的工作。今天我們將學(xué)習(xí)一下LHS(Left-Hand Side)和RHS(Right-Hand Side)查詢,它們?cè)贘avaScript編譯和執(zhí)行中的關(guān)鍵作用,以及在我們的日常開發(fā)中是如何發(fā)揮作用的。
接下來就讓我們來淺淺學(xué)習(xí)一下LHS和RHS
正文
很明顯L
為left,R
為right
所以我們大概可以猜到,用這樣一句話解釋:
當(dāng)變量出現(xiàn)在賦值操作的左側(cè)時(shí)進(jìn)行LHS查詢,出現(xiàn)在右側(cè)時(shí)進(jìn)行RHS查詢。
說得更簡單點(diǎn)RHS查詢與簡單地查找某個(gè)變量的值別無二致,而LHS查詢則是試圖找到變量的容器本身,從而可以對(duì)其賦值。
LHS查詢的學(xué)習(xí)
1. LHS查詢的概述
- LHS查詢涉及變量的存儲(chǔ)和初始化,是賦值操作的左側(cè)操作數(shù)。
- 編譯器如何處理LHS查詢,從變量聲明到內(nèi)存分配的全過程。
我們來看這個(gè)案例!
var name = "John"; // 在這個(gè)例子中,LHS查詢負(fù)責(zé)為變量name分配內(nèi)存并將其初始化為"John"
RHS查詢的學(xué)習(xí)
1. RHS查詢的本質(zhì)
- RHS查詢是獲取變量值的右側(cè)操作數(shù),是為了得到變量的值。
- 編譯器如何在RHS查詢中找到變量的值并傳遞給相應(yīng)的操作。
我們可以來看看這個(gè)案例,在我們輸出這個(gè)name
的時(shí)候,執(zhí)行的RHS查詢,負(fù)責(zé)獲取變量name
的值
codeconsole.log(name); // 在這個(gè)例子中,RHS查詢負(fù)責(zé)獲取變量name的值并傳遞給console.log
LHS和RHS查詢的細(xì)微差異
1. 查詢的方向與操作數(shù)
- 強(qiáng)調(diào)LHS查詢與RHS查詢的本質(zhì)區(qū)別在于操作數(shù)的方向,一個(gè)是賦值的左側(cè),一個(gè)是獲取值的右側(cè)。
- 通過比較LHS和RHS查詢?cè)谡Z法結(jié)構(gòu)中的不同,加深讀者對(duì)它們的理解。
我們通過下面這個(gè)案例來分析LHS和RHS直接的差異!
首先var x = 10
執(zhí)行的LHS查詢,找到x
的本身,并且把10賦值給x
在var y = x
這個(gè)語句當(dāng)中,同時(shí)存在LHS和RHS,為什么呢?
其中var y = 值
這里肯定執(zhí)行的LHS,負(fù)責(zé)找到y
本身,并且賦值
但是其中的值是x
是一個(gè)變量,所以又要進(jìn)行RHS查詢獲取到x
的值!
var x = 10; var y = x; // 在這里,x的RHS查詢獲取值,y的LHS查詢分配內(nèi)存并初始化
2. 函數(shù)調(diào)用與查詢操作
- 分析函數(shù)調(diào)用中的LHS和RHS查詢,探討調(diào)用過程中參數(shù)的查詢操作。
- 通過例子展示函數(shù)調(diào)用背后的查詢細(xì)節(jié)。
來分析下面的案例:
- 引擎首先會(huì)創(chuàng)建一個(gè)變量
result
,它會(huì)在當(dāng)前作用域中進(jìn)行 LHS 引用。 - 接著,引擎遇到
multiply(3, 4)
這個(gè)表達(dá)式,會(huì)進(jìn)行 RHS 引用。它會(huì)在作用域中查找multiply
函數(shù)。 - 找到
multiply
函數(shù)后,引擎會(huì)創(chuàng)建一個(gè)新的執(zhí)行上下文(execution context)用于調(diào)用multiply
函數(shù)。這個(gè)執(zhí)行上下文會(huì)包含參數(shù)a
和b
,分別被賦值為3
和4
。 multiply
函數(shù)執(zhí)行,計(jì)算3 * 4
的結(jié)果,返回12
。- 返回到主程序,將
result
賦值為12
。
整個(gè)過程中,LHS 引用用于變量的賦值操作,RHS 引用用于變量值的檢索操作。在這個(gè)例子中,multiply(3, 4)
的 RHS 引用觸發(fā)了函數(shù)的調(diào)用,而 result
的 LHS 引用用于將函數(shù)調(diào)用的結(jié)果賦值給 result
。
function multiply(a, b) { return a * b; } var result = multiply(3, 4); // 函數(shù)調(diào)用中的LHS和RHS查詢,以及賦值操作
最后:
總結(jié)一句話就是:
RHS查詢負(fù)責(zé)找到這個(gè)變量的值,而LHS查詢則是為了找到變量的容器本身,然后將我們要給它賦的值裝進(jìn)去(賦值)!
學(xué)習(xí)LHS和RHS查詢,能夠幫助我們理解JavaScript編譯的運(yùn)行機(jī)制,還能夠幫助我們編寫更高效、更健壯的代碼。希望這篇文章能夠?yàn)榇蠹姨峁┮恍W(xué)習(xí)理解LHS和RHS查詢的助力!
以上就是淺聊一下JavaScript中的LHS和RHS查詢的詳細(xì)內(nèi)容,更多關(guān)于JavaScript LHS和RHS查詢的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持 ,凡是涉及到用戶編輯信息然后保存的頁面,都涉及到一個(gè)數(shù)據(jù)是否符合要求的檢查,需要客服端和服務(wù)器端的校驗(yàn)的問題,本文介紹非常詳細(xì),具有參考價(jià)值,需要的朋友可以參考下2016-06-06微信小程序?qū)崿F(xiàn)watch監(jiān)聽
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)watch監(jiān)聽,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法
這篇文章主要介紹了javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法,實(shí)現(xiàn)在頁面點(diǎn)擊加減按鈕數(shù)字的累加,需要的朋友可以參考下2014-09-09利用AJAX實(shí)現(xiàn)WordPress中的文章列表及評(píng)論的分頁功能
在文中列表頁方面利用AJAX制作滾動(dòng)到底觸發(fā)翻頁的效果比較常見,而在評(píng)論加載時(shí)AJAX顯示正在加載也很常用,下面就來看一下如何利用AJAX實(shí)現(xiàn)WordPress中的文章列表及評(píng)論的分頁功能2016-05-05微信小程序如何在頁面跳轉(zhuǎn)時(shí)進(jìn)行頁面導(dǎo)航
小程序能夠在不同的頁面進(jìn)行跳轉(zhuǎn)切換,路由起到了至關(guān)重要的作用,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何在頁面跳轉(zhuǎn)時(shí)進(jìn)行頁面導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2022-09-09前端滾動(dòng)錨點(diǎn)三個(gè)常用方案(點(diǎn)擊后頁面滾動(dòng)到指定位置)
這篇文章主要給大家介紹了關(guān)于前端滾動(dòng)錨點(diǎn)的三個(gè)常用方案,實(shí)現(xiàn)的效果就是點(diǎn)擊后頁面滾動(dòng)到指定位置,三種方法分別是scrollIntoView、scrollTo和scrollBy,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01通過js簡單實(shí)現(xiàn)將一個(gè)文本內(nèi)容轉(zhuǎn)譯成加密文本
將文本內(nèi)容轉(zhuǎn)譯成加密文本,在某些情況下還是比較實(shí)用的,下面通過js簡單實(shí)現(xiàn)下,感興趣的朋友不要錯(cuò)過2013-10-10微信小程序?qū)崿F(xiàn)左右列表聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左右列表聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02vue組件中watch props根據(jù)v-if動(dòng)態(tài)判斷并掛載DOM的問題
這篇文章主要介紹了vue組件中watch props根據(jù)v-if動(dòng)態(tài)判斷并掛載DOM的問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05