JavaScript的查询机制LHS和RHS解析

 更新时间:2019年08月16日 14:41:16   作者:烟尘杨柳  
这篇文章主要介绍了JavaScript的查询机制LHS和RHS解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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 异常)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS实现电脑虚拟键盘的操作

    JS实现电脑虚拟键盘的操作

    这篇文章主要为大家详细介绍了JS实现电脑虚拟键盘的操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 重载toString实现JS HashMap分析

    重载toString实现JS HashMap分析

    用过Java的都知道,里面有个功能强大的数据结构——HashMap,它能提供键与值的对应访问。不过熟悉JS的朋友也会说,JS里面到处都是hashmap,因为每个对象都提供了map[key]的访问形式。
    2011-03-03
  • 原生js实现随机点名

    原生js实现随机点名

    这篇文章主要为大家详细介绍了原生js实现随机点名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • Ionic项目中Native Camera的使用方法

    Ionic项目中Native Camera的使用方法

    Ionic项目中如何使用Native Camera?这篇文章主要介绍了Ionic项目中Native Camera的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • js基于面向对象实现网页TAB选项卡菜单效果代码

    js基于面向对象实现网页TAB选项卡菜单效果代码

    这篇文章主要介绍了js基于面向对象实现网页TAB选项卡菜单效果代码,实例演示了鼠标滑过即点击两种方式实现tab选项卡切换功能,涉及JavaScript鼠标事件控制页面元素属性变换的功能,需要的朋友可以参考下
    2015-09-09
  • 兼容firefox的给每一个onClick再附加一个事件

    兼容firefox的给每一个onClick再附加一个事件

    如原来的onClick=="alert("a");",增加后变成onclick="alert("a");return false;"。 如果用脚本实现动态增加上去? 谢谢!
    2008-07-07
  • js移动焦点到最后位置的简单方法

    js移动焦点到最后位置的简单方法

    下面小编就为大家带来一篇js移动焦点到最后位置的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • javascript 易错知识点实例小结

    javascript 易错知识点实例小结

    这篇文章主要介绍了javascript 易错知识点,结合实例形式总结分析了javascript 对象属性、继承常见易错知识点与注意事项,需要的朋友可以参考下
    2020-04-04
  • js获取滚动距离的方法

    js获取滚动距离的方法

    这篇文章主要介绍了js获取滚动距离的方法,涉及javascript针对页面滚动条的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • 原生JavaScript实现轮播图

    原生JavaScript实现轮播图

    这篇文章主要为大家详细介绍了原生JavaScript实现轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01

最新评论