JavaScript中的LHS和RHS分析詳情
前言:
對于LHS和RHS,從字面意思來說是?? Left Hand Side?
?和?? Right Hand Side?
?即左手邊和右手邊,一般可以理解為賦值操作的左側(cè)和右側(cè),然而不能片面的用??=?
?號左邊還說右邊去判斷是??LHS?
?還是??RHS?
?通俗的理解,?
?LHS?
?是賦值操作即可以看做是在往內(nèi)存中存儲值,而??RHS?
?是取值操作,它是從內(nèi)存中進行檢索。事實上賦值操作還有其他幾種形式,因此在概念上最好將其理解為“賦值操作的目標是誰(LHS)”以及“誰是賦值操作的源頭(RHS)”。
進一步理解
這兩種不同的引用方式對沒有聲明的變量的處理方式上是不同的,而這個不同之處對于我們編寫代碼和分析JS引擎報錯是很有益處的。 當對一個變量執(zhí)行??RHS?
?查詢時,如果遍歷該變量所在處的詞法作用域未能找到這個變量,JS引擎就會拋出?? ReferenceError?
?錯誤如果成功查詢到了這個變量,但是對這個變量執(zhí)行不合理操作,比如對一個非數(shù)組的變量執(zhí)行下標取值,JS引擎就會拋出?? TypeError?
?錯誤,甚至跟你說這個操作對應(yīng)的只能是數(shù)組。當對一個變量執(zhí)行?
?LHS?
?查詢時,同樣在遍歷作用域后無法找到該變量,在非??ES5?
?的嚴格模式下,系統(tǒng)就會自動在全局作用域中創(chuàng)建一個同名變量,并將引用轉(zhuǎn)移到該新建的全局變量中。而在??ES5?
?的嚴格模式下,LHS查詢失敗時JS引擎會拋出一個同RHS一樣的?? ReferenceError ?
?錯誤。![?
因此,對LHS查詢和RHS查詢的仔細區(qū)分和理解無論是對JS執(zhí)行過程本身的理解還是分析錯誤都是有所好處的。
在JS語言特點
JavaScript在類型上通常會被歸類為“動態(tài)”或“解釋執(zhí)行”語言,但事實上它是一門編譯語言。
JavaScript是世界上最流行的腳本語言,因為你在電腦、手機、平板上瀏覽的所有的網(wǎng)頁,以及無數(shù)基于HTML5的手機App,交互邏輯都是由JavaScript驅(qū)動的。
簡單地說,JavaScript是一種運行在瀏覽器中的解釋型的編程語言。
不過這種語言與傳統(tǒng)的編譯語言還是有點不同,它不是提前編譯的,編譯結(jié)果也不能在分布式系統(tǒng)上進行移植,做過前端項目部署的同學(xué),也會發(fā)現(xiàn),我們將項目編譯完成之后是個??dist?
?文件,之后將這整個文件直接放在web服務(wù)器上面,如nginx、tomcat等,這個是個很純粹的單機部署。
編譯特點
比如說,執(zhí)行一個賦值語句,我們的JavaScript引擎要做多少事呢?
var girlfriend = 'naug'
事實上做了兩步,JavaScript 會將其看成兩句聲明:??var girlfriend;?
?和??girlfriend = 'naug';?
?
- 定義聲明在編譯階段進行
- 賦值聲明會被留在原地等待執(zhí)行階段。
分析
變量的賦值操作會執(zhí)行兩個動作,首先編譯器會在當前作用域中聲明一個變量(如果之前沒有聲明過),然后在運行時引擎會在作用域中查找該變量,如果能夠找到就會對它賦值。 而要講的LHS 和 RHS就是上面說的對變量的兩種查找操作,查找的過程是由作用域(詞法作用域)進行協(xié)助,在編譯的第二步中執(zhí)行。 前面我們說到,??LHS?
?是賦值操作就是在往內(nèi)存中存儲值,而??RHS?
?是取值操作可以從內(nèi)存中檢索值,那么基于這個信息點,我們再來分析一個復(fù)雜一些的例子
function together(people) { var girlFriend = people; return girlFriend } var luckyGirl = together('naug');
問,這個例子中一共用了多少個LHS和RHS? 答,3個LHS和3個RHS
- LHS
- 函數(shù)里面隱藏的??people = 'naug'?
?(隱式變量分配),當調(diào)用??together('naug')?
?時,需要將實參??naug?
?賦值給形參??people?
?,所以對??people?
?需要進行??LHS?
?操作 - 對于?
?girlFriend = people?
? ,中,girlFriend在賦值操作的左邊,即將該變量往該作用域空間所在內(nèi)存區(qū)間儲值,也就是進行LHS操作 - ?
?luckyGirl = ... ?
?,中??luckyGirl?
?在賦值操作的左邊,需要為該變量在內(nèi)存中進行儲值,即對??luckyGirl?
?進行??LHS?
?操作
- RHS
- ??girlFriend = people?
? ,中??people?
?在賦值操作的右邊,??javascript?
?引擎需要對其進行取值操作,因此進行??RHS?
?查詢 - ?
?return girlFriend?
?,由于需要知道??girlfriend?
?的值,因此進行??RHS?
?查詢到??girlfriend?
?的值 - ?
?luckyGirl = together('naug')?
?,中??together('naug')?
?在賦值操作的右邊因此需要知道該函數(shù)執(zhí)行之后的值 小結(jié):如果查找的目的是對變量進行賦值,那么就會使用LHS查詢;如果目的是獲取變量的值,就會使用RHS查詢。
區(qū)分 LHS 和 RHS 的重要性
因為在變量還沒有聲明(在任何作用域中都無法找到該變量)情況下,這兩種查詢行為是不一樣的。 對于作用域的分析可以看一下這篇文章? ?關(guān)于JS中的作用域??,這里想說的是LHS和RHS都會在當前執(zhí)行作用域中開始,如果有需要(也就是說他們沒有找到所需的標識符),就會向上級作用域繼續(xù)查找目標標識符,依次上升一次作用域,最后抵達全局作用域,最后無論找到或沒找到都將到此為止
總結(jié):
不成功的RHS引用會導(dǎo)致拋出??ReferenceError?
?異常。不成功的LHS引用會導(dǎo)致自動隱式地創(chuàng)建一個全局變量(非嚴格模式下),該變量使用LHS引用的目標作為標識符,或者拋出??ReferenceError?
?異常(嚴格模式下)。
到此這篇關(guān)于JavaScript中的LHS和RHS分析詳情的文章就介紹到這了,更多相關(guān)JavaScript中的LHS和RHS內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于JavaScript中forEach和each用法淺析
這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和each使用方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07JavaScript實現(xiàn)京東購物放大鏡和選項卡效果的方法分析
這篇文章主要介紹了JavaScript實現(xiàn)京東購物放大鏡和選項卡效果的方法,結(jié)合實例形式分析了javascript基于事件響應(yīng)、數(shù)值計算與頁面元素動態(tài)修改實現(xiàn)圖片放大功能以及tab選項卡切換效果相關(guān)操作技巧,需要的朋友可以參考下2018-07-07遍歷json 對象的屬性并且動態(tài)添加屬性的實現(xiàn)
下面小編就為大家?guī)硪黄闅vjson 對象的屬性并且動態(tài)添加屬性的實現(xiàn)。小編覺的挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12JS小功能(操作Table--動態(tài)添加刪除表格及數(shù)據(jù))實現(xiàn)代碼
這篇文章主要介紹了操作Table--動態(tài)添加刪除表格及數(shù)據(jù)實現(xiàn)代碼,有需要的朋友可以參考一下2013-11-11JavaScript ECMA-262-3 深入解析.第三章.this
在這篇文章里,我們將討論跟執(zhí)行上下文直接相關(guān)的更多細節(jié)。討論的主題就是this關(guān)鍵字2011-09-09