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控制frame,iframe的src属性代码
Dec 31 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
JavaScript中的 new 命令
May 22 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
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操作数组相关函数
2011/02/03 PHP
php+highchats生成动态统计图
2014/05/21 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
javascript smipleChart 简单图标类
2011/01/12 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
详解vue-cli3使用
2018/08/14 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python中常见的数据类型小结
2015/08/29 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
教师档案管理制度
2014/01/23 职场文书
上课玩手机检讨书
2014/02/08 职场文书
《理想》教学反思
2014/02/17 职场文书
励志演讲稿500字
2014/08/21 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
《开国大典》教学反思
2016/02/16 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python