前端JavaScript篇之JavaScript为什么要进行变量提升,它导致了什么问题?什么是尾调用,使用尾调用有什么好处?

目录

  • JavaScript为什么要进行变量提升,它导致了什么问题?
    • 总结
  • 什么是尾调用,使用尾调用有什么好处?
    • 总结


JavaScript为什么要进行变量提升,它导致了什么问题?

变量提升是JavaScript在代码执行之前对变量和函数声明进行预处理的机制。它主要有两个目的:提高性能和容错性。

  • 提高性能:通过将变量和函数的声明提前到作用域顶部,避免了在执行过程中重复解析和查找的开销。预先分配栈空间也提高了函数执行的效率。

  • 容错性更好:变量提升使得可以在变量声明之前就使用它们,即使在代码书写上存在疏忽,也不会报错。这种容错性可以避免一些不规范的代码导致的问题。

然而,变量提升也可能导致一些问题。由于变量声明被提升到作用域顶部,如果在变量声明之前就使用该变量,其值会是undefined,可能导致意外的行为和错误。

// 示例1
var tmp = new Date()

function fn() {
  console.log(tmp)
  if (false) {
    var tmp = 'hello world'
  }
}

fn() // undefined

// 示例2
var tmp = 'hello world'

for (var i = 0; i < tmp.length; i++) {
  console.log(tmp[i])
}

console.log(i) // 11

请添加图片描述

在示例1中,由于变量提升的原因,内层定义的tmp被提到函数内部的最顶部,覆盖了外层的tmp,导致在打印时其值为undefined。

在示例2中,由于变量i使用了var进行声明,它会被提升到全局作用域,因此在循环结束后仍然存在,打印结果为11。

总结

变量提升是JavaScript在代码执行之前对变量和函数声明进行预处理的机制。它提高了性能和容错性,但也可能导致在变量声明之前使用变量时出现undefined的情况。为避免潜在问题,建议在代码中始终先声明变量再使用,并使用ES6的let和const来避免变量提升带来的一些隐患。

什么是尾调用,使用尾调用有什么好处?

尾调用是指一个函数的最后一步操作是调用另一个函数。在尾调用中,被调用的函数是当前函数的最后一个操作,并且没有其他操作需要执行。

使用尾调用有以下好处:

  1. 减少内存消耗:尾调用可以避免在调用栈中创建新的堆栈帧,因为它不会在调用栈中保留当前函数的堆栈帧。这样可以减少内存的使用量,特别是在递归调用时,可以避免堆栈溢出的问题。

  2. 提高性能:由于尾调用不会创建新的堆栈帧,因此可以减少函数调用的开销,提高代码的执行效率。

  3. 优化编译器:尾调用的结构相对简单,编译器可以对其进行优化,例如将尾调用转换为迭代循环,进一步提高代码的执行效率。

function factorial(n, acc = 1) {
  if (n <= 1) {
    return acc
  }

  // 尾调用
  return factorial(n - 1, n * acc)
}

console.log(factorial(5)) // 120

在上述代码中,factorial函数使用了尾调用来计算阶乘。每次递归调用时,都将n减1并将结果乘以acc,然后再次调用factorial函数。这样,在每一次递归调用中,都是尾调用的形式,没有其他操作需要执行。

总结

尾调用是指一个函数的最后一步操作是调用另一个函数,它可以减少内存消耗,提高性能,并且可以优化编译器。使用尾调用可以避免堆栈溢出问题,特别是在递归调用时。对于需要频繁进行函数调用的场景,尾调用可以提供更好的性能和内存利用率。在ES6中,尾调用优化只在严格模式下开启,而在正常模式下是无效的。在使用尾调用时,如果需要确保优化生效,应该使用严格模式。

持续学习总结记录中,回顾一下上面的内容:
JavaScript进行变量提升是为了在代码执行前将变量声明提升到作用域顶部,但可能导致意外行为。尾调用是指函数的最后一个动作是调用另一个函数,使用尾调用可以优化内存使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/372975.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

机器学习---半监督学习简单示例(标签传播算法)

1. 使用半监督学习方法 Label Spreading 在一个生成的二维数据集上进行标签传播 import numpy as np import matplotlib.pyplot as plt from sklearn.semi_supervised import label_propagation from sklearn.datasets import make_circles# generate ring with inner box n_s…

vue3中自定义简易版hooks,computed筛选

一、默认computed筛选方式 <template><div><input type"text" v-model"mytext"><ul><li v-for"data in computedList" :key"data">{{data}}</li></ul></div> </template><…

TryHackMe-Net Sec Challenge练习

本文相关的TryHackMe实验房间链接&#xff1a;TryHackMe | Why Subscribe nmap nmap -T5 -p- 10.10.90.32 -T5 扫描速度 -p- 全端口扫描 答题&#xff1a; 这题叫我们找藏在http服务下的flag&#xff0c;根据上面扫出来的端口&#xff0c;所以我们开始搞80 这里简单介绍一下…

EMNLP 2023精选:Text-to-SQL任务的前沿进展(上篇)——正会论文解读

导语 本文记录了今年的自然语言处理国际顶级会议EMNLP 2023中接收的所有与Text-to-SQL相关&#xff08;通过搜索标题关键词查找得到&#xff0c;可能不全&#xff09;的论文&#xff0c;共计12篇&#xff0c;包含5篇正会论文和7篇Findings论文&#xff0c;以下是对这些论文的略…

打印文件pdf怎么转换成word文档?pdf转换工具推荐

有时候我们可能需要重用PDF文件中的文本内容&#xff0c;比如引用某些段落、复制粘贴特定文字或提取数据&#xff0c;通过将pdf文件转换成word&#xff0c;可以轻松地提取和重用其中的文本&#xff0c;节省时间和努力&#xff0c;那么pdf怎么转word呢&#xff1f;可以试试本文推…

React 中实现拖拽功能-插件 react-beautiful-dnd

拖拽功能在平时开发中是很常见的&#xff0c;这篇文章主要使用react-beautiful-dnd插件实现此功能。 非常好用&#xff0c;附上GitHub地址&#xff1a;https://github.com/atlassian/react-beautiful-dnd 安装及引入 // 1.引入 # yarn yarn add react-beautiful-dnd# npm npm…

左旋字符串的三种方法,并判断一个字符串是否为另外一个字符串旋转之后的字符串。(strcpy,strncat,strcmp,strstr函数的介绍)

一. 实现一个函数&#xff0c;可以左旋字符串中的k个字符。 例如&#xff1a; ABCD左旋一个字符得到BCDA ABCD左旋两个字符得到CDAB 通过分析&#xff0c;可以知道实际的旋转次数&#xff0c;其实是k%&#xff08;字符串长度&#xff09;。假设一个字…

小白水平理解面试经典题目_数组类LeetCode 118 Pascal‘s Triangle【回归解法】

LeetCode 118 生成杨辉三角&#xff08;Pascal’s Triangle&#xff09; 小白渣翻译 给定一个非负整数 numRows&#xff0c;生成杨辉三角的前 numRows 行。 在杨辉三角中&#xff0c;每个数是它左上方和右上方的数的和。 例子 这里是小白理解 那么这种题目一上来看&#xf…

利用视图实现复杂查询

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; 利用视图实现复杂查询 需求&#xff1a;需要对Excel表中导入的四列进行&#xff0c;精准查询&#xff08;搜索符合这四列的数据&#xff09;&#xff0c;并提供预览后…

c#cad 创建-文本(一)

运行环境 vs2022 c# cad2016 调试成功 一、代码说明 该代码是一个用于在AutoCAD中创建文本的命令。 首先&#xff0c;通过添加using语句引用了需要使用的Autodesk.AutoCAD命名空间。 然后&#xff0c;在命名空间CreateTextInCad下定义了一个名为CreateTextCommand的类&…

C# CAD交互界面-自定义窗体(三)

运行环境 vs2022 c# cad2016 调试成功 一、引用 二、开发代码进行详细的说明 初始化与获取AutoCAD核心对象&#xff1a; Database db HostApplicationServices.WorkingDatabase;&#xff1a;这行代码获取当前工作中的AutoCAD数据库对象。在AutoCAD中&#xff0c;所有图形数…

《动手学深度学习(PyTorch版)》笔记7.1

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;书上的源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode在python 3.9.18下测试通过&…

数据库学习笔记2024/2/5

2. SQL 全称 Structured Query Language&#xff0c;结构化查询语言。操作关系型数据库的编程语言&#xff0c;定义了 一套操作关系型数据库统一标准 2.1 SQL通用语法 在学习具体的SQL语句之前&#xff0c;先来了解一下SQL语言的通用语法。 1). SQL语句可以单行或多行书写&…

C语言中10种常见的字符串函数你都掌握了吗?

目录 ​编辑 1.strlen(字符串长度计算函数) 2.strcpy&#xff08;字符串拷贝函数&#xff09; 3.strcat&#xff08;字符串追加函数&#xff09; 4.strcmp&#xff08;字符串大小比较函数&#xff09; 5.strncpy&#xff08;有限制的字符串拷贝函数&#xff09; 6.strnca…

DevOps落地笔记-15|混沌工程:通过问题注入提高系统可靠性

上一课时介绍了通过搭建一套部署流水线&#xff0c;高效、可靠的将软件部署到测试环境以及生产环境。到目前为止&#xff0c;我们学习了从用户需求到软件部署到生产环境交付给用户的全过程。随着软件工程不断发展&#xff0c;近几年&#xff0c;出现了一种新的实践&#xff0c;…

[Angular 基础] - 指令(directives)

[Angular 基础] - 指令(directives) 这里假设已经知道如何创建 Angular 组件以及数据绑定&#xff0c;不然可以参考前两篇笔记&#xff1a; [Angular 基础] - Angular 渲染过程 & 组件的创建 [Angular 基础] - 数据绑定(databinding) 就像中文翻译一样&#xff0c;dire…

一文讲透ast.literal_eval() eval() json.loads()

文章目录 一文讲透ast.literal_eval() eval() json.loads()1. ast.literal_eval()2. eval()3. json.loads()4. 总结 一文讲透ast.literal_eval() eval() json.loads() 在Python库中&#xff0c;我们经常会遇到需要将字符串转换为相应对象或数据结构的情况。在这种情况下&#…

研究表明:论文被大V宣传后,引用次数暴涨2~3倍!

随着AI领域的迅猛发展&#xff0c;学术成果的传播方式发生了显著转变。 期刊审稿周期长&#xff0c;当你还在和审稿人battle时&#xff0c;方法先过时了。而会议虽然没有期刊长&#xff0c;但也有几个月的时间差&#xff0c;为了保护成果的创新性并扩大影响力&#xff0c;很多…

mysql-FIND_IN_SET查询优化

优化前 SELECTuser_id,user_name,real_name,PASSWORD,real_org_id,real_org_name,real_dept_id,real_dept_name, STATUS FROMsys_user WHEREis_del 0 AND find_in_set( lilong, login_user_account ) 优化后 SELECTuser_id,user_name,real_name,PASSWORD,real_org_id,real…

必须了解的mysql三大日志-binlog、redo log和undo log

背景 日志是 mysql 数据库的重要组成部分&#xff0c;记录着数据库运行期间各种状态信息。mysql日志主要包括错误日志、查询日志、慢查询日志、事务日志、二进制日志几大类。 作为开发&#xff0c;我们重点需要关注的是二进制日志( binlog )和事务日志(包括redo log 和 undo …
最新文章