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 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
子页向父页传值示例
Nov 27 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
JavaScript中import用法总结
Jan 20 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 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实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
python字典序问题实例
2014/09/26 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python plotly绘制直方图实例详解
2019/07/22 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
详解Python time库的使用
2019/10/10 Python
Python绘制组合图的示例
2020/09/18 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
销售业务员岗位职责
2015/02/13 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
爱心捐助活动总结
2015/05/09 职场文书
小学教师教学反思
2016/02/24 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers