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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
js获取url中"?"后面的字串方法
May 15 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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维护文件系统
2006/10/09 PHP
BBS(php & mysql)完整版(七)
2006/10/09 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP中文编码小技巧
2014/12/25 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python 3.x 新特性及10大变化
2015/06/12 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
Keras loss函数剖析
2020/07/06 Python
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
教师年终个人自我评价
2013/10/04 职场文书
主题班会演讲稿
2014/05/22 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2014年物流工作总结
2014/11/25 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang