JavaScript的查询机制LHS和RHS解析


Posted in Javascript onAugust 16, 2019

JavaScript 引擎在查找一个变量的时候,有两种查找机制:LHS 和 RHS。

RHS 的查询是简单地查找到某个变量的值,而 LHS 则是试图找到变量的容器的本身。

一个简单的例子:当我们执行 console.log(a) 时,执行的就是 RHS ,因为这里 a 并没有赋予任何的值。相应的,需要查找并取得 a 的值,这样才能将值传递给 conso.log(..)。

而当我们执行到 a = 2 时,这里对 a 的引用就是 LHS 引用,因为实际上我们并不关心当前的值是什么,只是想要为 =2 这个赋值操作找到一个目标。

需要注意的是:

当我们执行以下代码:

function foo(a){
console.log(a); // 2
}
foo(2);

这里对 foo 的调用执行了 RHS 引用,但还有一个隐式的 a = 2 的操作,这里又执行了一个 LHS 引用。

我们通常把 function foo(a){} 转变为 var foo,foo = function(){} ,如果这样理解的话,这个函数声明会执行 LHS 查询,但是在引擎执行代码的时候,并不会有线程专门用来将一个函数值“分配给”foo。所以,将函数声明理解成 赋值 的 LHS 查询的形式并不合适。

区分 LHS 和 RHS 是一件很重要的事。如果 RHS 查询在作用域链中找不到需要的变量,会抛出 ReferenceError 的异常。

function foo(a){
console.log(a + b);
}
foo()

以上代码会抛出异常:b is not defined

相比之下,如果JavaScript引擎执行的是 LHS 查询,如果一直到顶层的作用域(全局作用域)中都没有找到目标变量的话,它就会在全局作用域中声明一个具有目标名称的变量,并将其返回给引擎。(非严格模式下,严格模式下会禁止自动创建或隐式创建全局变量)

function foo(a){
b = a; // b = 2
}
foo(2)

上面的代码执行的 LHS 查询,在非严格模式下,JavaScript 引擎在全局作用域中没有找到 b,所以它就在全局作用域中声明了一个变量 b。所以此时结果不会报错且b被赋值为2。

总结:

作用域是一套规则,用于确定在何处以及如何查找变量(标识符)。如果查找的目的是对变量进行赋值,就会使用 LHS 查询;如果目的是获取变量的值,就会使用 RHS 查询。

= 操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。

LHS 和 RHS 查询都会在当前执行作用域中开始,如果有需要(当前没找到),就会向上级作用域继续查找目标标识符(作用域链)。

不成功的 RHS 会导致抛出 ReferenceError 异常。不成功的 LHS 会自动隐式在全局作用域中创建一个全局变量(非严格模式下),该变量使用 LHS 引用的目标作为标识符。(如果是严格模式下也会抛出 ReferenceError 异常)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
整理一下常见的IE错误
Nov 18 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
微信小程序云开发如何实现数据库自动备份实现
Aug 16 #Javascript
jQuery zTree树插件的使用教程
Aug 16 #jQuery
Vue 权限控制的两种方法(路由验证)
Aug 16 #Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 #Javascript
jQuery zTree插件快速实现目录树
Aug 16 #jQuery
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 #Javascript
You might like
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
详解Python locals()的陷阱
2019/03/26 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
浅谈Python中的继承
2020/06/19 Python
python开根号实例讲解
2020/08/30 Python
Python request中文乱码问题解决方案
2020/09/17 Python
毕业生求职简历的自我评价
2013/10/23 职场文书
电大物流学生的自我评价
2013/10/25 职场文书
学期自我鉴定
2013/11/04 职场文书
2015年安全月活动总结
2015/03/26 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python