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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
Jquery cookie操作代码
Mar 14 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
React组件生命周期详解
Jul 03 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
基于JavaScript实现轮播图效果
Jan 02 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查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
pandas的相关系数与协方差实例
2019/12/27 Python
np.dot()函数的用法详解
2020/01/17 Python
Python API len函数操作过程解析
2020/03/05 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
电台编导求职信
2014/05/06 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android
JS setTimeout与setInterval的区别
2022/04/20 Javascript