浅聊一下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查询的资料请关注脚本之家其它相关文章!

相关文章

  • BootStrap智能表单实战系列(七)验证的支持

    BootStrap智能表单实战系列(七)验证的支持

    这篇文章主要介绍了BootStrap智能表单实战系列(七)验证的支持 ,凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题,本文介绍非常详细,具有参考价值,需要的朋友可以参考下
    2016-06-06
  • 微信小程序实现watch监听

    微信小程序实现watch监听

    这篇文章主要介绍了微信小程序实现watch监听,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • js实现拖拽上传图片功能

    js实现拖拽上传图片功能

    这篇文章主要为大家详细介绍了js实现拖拽上传图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • javascript获取dom的下一个节点方法

    javascript获取dom的下一个节点方法

    这篇文章主要介绍了javascript获取dom的下一个节点方法,实现在页面点击加减按钮数字的累加,需要的朋友可以参考下
    2014-09-09
  • 利用AJAX实现WordPress中的文章列表及评论的分页功能

    利用AJAX实现WordPress中的文章列表及评论的分页功能

    在文中列表页方面利用AJAX制作滚动到底触发翻页的效果比较常见,而在评论加载时AJAX显示正在加载也很常用,下面就来看一下如何利用AJAX实现WordPress中的文章列表及评论的分页功能
    2016-05-05
  • 微信小程序如何在页面跳转时进行页面导航

    微信小程序如何在页面跳转时进行页面导航

    小程序能够在不同的页面进行跳转切换,路由起到了至关重要的作用,下面这篇文章主要给大家介绍了关于微信小程序如何在页面跳转时进行页面导航的相关资料,需要的朋友可以参考下
    2022-09-09
  • 前端滚动锚点三个常用方案(点击后页面滚动到指定位置)

    前端滚动锚点三个常用方案(点击后页面滚动到指定位置)

    这篇文章主要给大家介绍了关于前端滚动锚点的三个常用方案,实现的效果就是点击后页面滚动到指定位置,三种方法分别是scrollIntoView、scrollTo和scrollBy,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • 通过js简单实现将一个文本内容转译成加密文本

    通过js简单实现将一个文本内容转译成加密文本

    将文本内容转译成加密文本,在某些情况下还是比较实用的,下面通过js简单实现下,感兴趣的朋友不要错过
    2013-10-10
  • 微信小程序实现左右列表联动

    微信小程序实现左右列表联动

    这篇文章主要为大家详细介绍了微信小程序实现左右列表联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02
  • vue组件中watch props根据v-if动态判断并挂载DOM的问题

    vue组件中watch props根据v-if动态判断并挂载DOM的问题

    这篇文章主要介绍了vue组件中watch props根据v-if动态判断并挂载DOM的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05

最新评论