浅聊一下JavaScript中的LHS和RHS查询

 更新时间:2023年11月13日 11:17:46   作者:Aidan路修远i  
在日常编码中,我们通常关注代码的逻辑和功能,但很少深入思考编译器在幕后的工作,今天我们将学习一下LHS(Left-Hand Side)和RHS(Right-Hand Side)查询,它们在JavaScript编译和执行中的关键作用,以及在我们的日常开发中是如何发挥作用的,需要的朋友可以参考下

前言

在日常编码中,我们通常关注代码的逻辑和功能,但很少深入思考编译器在幕后的工作。今天我们将学习一下LHS(Left-Hand Side)和RHS(Right-Hand Side)查询,它们在JavaScript编译和执行中的关键作用,以及在我们的日常开发中是如何发挥作用的。

接下来就让我们来浅浅学习一下LHS和RHS

正文

很明显L为left,R为right

所以我们大概可以猜到,用这样一句话解释:

当变量出现在赋值操作的左侧时进行LHS查询,出现在右侧时进行RHS查询。

说得更简单点RHS查询与简单地查找某个变量的值别无二致,而LHS查询则是试图找到变量的容器本身,从而可以对其赋值。

LHS查询的学习

1. LHS查询的概述

  • LHS查询涉及变量的存储和初始化,是赋值操作的左侧操作数。
  • 编译器如何处理LHS查询,从变量声明到内存分配的全过程。

我们来看这个案例!

var name = "John";
// 在这个例子中,LHS查询负责为变量name分配内存并将其初始化为"John"

RHS查询的学习

1. RHS查询的本质

  • RHS查询是获取变量值的右侧操作数,是为了得到变量的值。
  • 编译器如何在RHS查询中找到变量的值并传递给相应的操作。

我们可以来看看这个案例,在我们输出这个name的时候,执行的RHS查询,负责获取变量name的值

codeconsole.log(name);
// 在这个例子中,RHS查询负责获取变量name的值并传递给console.log

LHS和RHS查询的细微差异

1. 查询的方向与操作数

  • 强调LHS查询与RHS查询的本质区别在于操作数的方向,一个是赋值的左侧,一个是获取值的右侧。
  • 通过比较LHS和RHS查询在语法结构中的不同,加深读者对它们的理解。

我们通过下面这个案例来分析LHS和RHS直接的差异!

首先var x = 10执行的LHS查询,找到x的本身,并且把10赋值给x

var y = x这个语句当中,同时存在LHS和RHS,为什么呢?

其中var y = 值这里肯定执行的LHS,负责找到y本身,并且赋值

但是其中的x是一个变量,所以又要进行RHS查询获取到x的值!

var x = 10;
var y = x;
// 在这里,x的RHS查询获取值,y的LHS查询分配内存并初始化

2. 函数调用与查询操作

  • 分析函数调用中的LHS和RHS查询,探讨调用过程中参数的查询操作。
  • 通过例子展示函数调用背后的查询细节。

来分析下面的案例:

  • 引擎首先会创建一个变量 result,它会在当前作用域中进行 LHS 引用。
  • 接着,引擎遇到 multiply(3, 4) 这个表达式,会进行 RHS 引用。它会在作用域中查找 multiply 函数。
  • 找到 multiply 函数后,引擎会创建一个新的执行上下文(execution context)用于调用 multiply 函数。这个执行上下文会包含参数 ab,分别被赋值为 34
  • multiply 函数执行,计算 3 * 4 的结果,返回 12
  • 返回到主程序,将 result 赋值为 12

整个过程中,LHS 引用用于变量的赋值操作,RHS 引用用于变量值的检索操作。在这个例子中,multiply(3, 4) 的 RHS 引用触发了函数的调用,而 result 的 LHS 引用用于将函数调用的结果赋值给 result

function multiply(a, b) {
  return a * b;
}
var result = multiply(3, 4);
// 函数调用中的LHS和RHS查询,以及赋值操作

最后:

总结一句话就是:

RHS查询负责找到这个变量的值,而LHS查询则是为了找到变量的容器本身,然后将我们要给它赋的值装进去(赋值)!

学习LHS和RHS查询,能够帮助我们理解JavaScript编译的运行机制,还能够帮助我们编写更高效、更健壮的代码。希望这篇文章能够为大家提供一些学习理解LHS和RHS查询的助力!

以上就是浅聊一下JavaScript中的LHS和RHS查询的详细内容,更多关于JavaScript LHS和RHS查询的资料请关注脚本之家其它相关文章!

相关文章

  • javaScript给元素添加多个class的简单实现

    javaScript给元素添加多个class的简单实现

    下面小编就为大家带来一篇javaScript给元素添加多个class的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Bootstrap对话框使用实例讲解

    Bootstrap对话框使用实例讲解

    这篇文章主要为大家详细介绍了Bootstrap对话框使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 小程序组件传值和引入sass的方法(使用vant Weapp组件库)

    小程序组件传值和引入sass的方法(使用vant Weapp组件库)

    这篇文章主要介绍了小程序组件传值和引入sass使用vant Weapp组件库,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • Cropper.js进阶之裁剪后保存至本地实现示例

    Cropper.js进阶之裁剪后保存至本地实现示例

    这篇文章主要为大家介绍了Cropper.js进阶之裁剪后保存至本地实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JavaScript中数据过滤的几种常见方法

    JavaScript中数据过滤的几种常见方法

    JavaScript是一种广泛使用的编程语言,它提供了多种方法来对数据进行过滤,在本文中,我们将介绍JavaScript中常见的几种数据过滤方法,并提供相应的示例,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • Bootstrap表单使用方法详解

    Bootstrap表单使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap表单使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 封装好的一个万能检测表单的方法

    封装好的一个万能检测表单的方法

    这篇文章主要介绍了一个封装好的万能检测表单的方法,非常的好用,使用也很方便,这里推荐给小伙伴们。
    2015-01-01
  • js模拟F11页面全屏显示

    js模拟F11页面全屏显示

    这篇文章主要为大家详细介绍了js模拟实现F11使页面全屏显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • JS实现面向对象继承的5种方式分析

    JS实现面向对象继承的5种方式分析

    这篇文章主要介绍了JS实现面向对象继承的5种方式,结合实例形式分析了JavaScript面向对象继承功能的5种常见实现方法原理与操作技巧,需要的朋友可以参考下
    2018-07-07
  • js无刷新操作table的行和列

    js无刷新操作table的行和列

    这篇文章主要介绍了js操作table的行和列,无刷新实现,需要的朋友可以参考下
    2014-03-03

最新评论