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 滚动条事件简单实例
Jul 12 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
js窗口震动小程序分享
Nov 28 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
js读取cookie方法总结
2014/10/31 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
python 调用c语言函数的方法
2017/09/29 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
python关于变量名的基础知识点
2020/03/03 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
初中作文评语集锦
2014/12/25 职场文书
财务总监岗位职责
2015/02/03 职场文书
工程质检员岗位职责
2015/04/08 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
golang日志包logger的用法详解
2021/05/05 Golang