前端常见的栈溢出报错

什么是栈溢出?

在前端开发中,栈溢出是指JavaScript引擎执行代码时,调用栈(call stack)变得太大,超过了浏览器或JavaScript引擎所分配的栈空间,从而导致栈溢出错误调用栈是一种数据结构,用于存储函数调用的信息,包括每个函数的局部变量参数返回地址

当一个函数被调用时,它的信息被推送到调用栈的顶部,当函数执行完毕时,该信息被弹出。如果在一个递归函数或深度嵌套的函数调用链中,调用栈的深度变得过大,超过了引擎的限制,就会导致栈溢出。

一般产生溢出的原因如下:

(下面将会举例一些常见的错误)

1.递归调用未正确终止

function fn() {return fn();
}
fn();

执行上面的代码出现报错:这是告诉开发者调用栈已经超出了最大限制

上面的函数调用,明显就是有问题的,我们需要确保递归调用有正确的终止条件 

比如我们可以增加传参,设定可以终止的条件,比如:

function fn(count) {console.log(count);if (count <= 0) {return '停止';   //等于小于0时停止递归}return fn(count - 1);  //每次减1
}
fn(10); // 适当的终止条件

2.事件处理函数中的递归调用

我们获取了一个btn实例进行监听点击事件然后触发handleCllick事件,但是点击后进行了无限制触发

document.getElementById('btn').addEventListener('click',function handleClick() {handleClick(); // 递归调用
});

上面的代码需要确保不会无限制地在事件处理函数中触发相同的事件

document.getElementById('myButton').addEventListener('click', 
function handleClick() {// 处理点击事件的逻辑
});

3.深度嵌套的回调函数

报错代码:

function fn(callback) {callback(fn); // 可能导致栈溢出
}fn(function callback1(val) {val(function callback2(val2) {// 更多的嵌套回调});
});

因为函数调用层次太深,函数递归调用时,系统要在栈中不断保存函数调用产生的变量,如果递归调用太深,就会造成栈溢出,这时递归无法返回

为了避免过度嵌套回调函数,可以使用 Promiseasync/await 进行异步控制

function fn() {return new Promise(resolve => {resolve();});
}fn().then(() => fn()).then(() => fn());

4.变量未定义也会栈溢出

变量未定义通常不会导致栈溢出,而是会引发 ReferenceError 错误。栈溢出通常是由于函数调用栈的深度过大导致的。然而,如果在递归中使用未定义的变量,可能会导致递归调用的栈溢出。

function fn(count) {console.log(count);// 忘记定义变量 xreturn fn(count - 1)+ x 
}fn(5);

 报错如下:

由于变量 x 没有被定义,它的值为 undefined。在递归调用中,这可能导致栈溢出,因为每次递归都会尝试访问 fn(...)+undefined,从而形成无限递归

我们需要确保所有变量在使用之前都被正确地定义

function fn(count) {// 定义变量 `x`,或者在递归中使用参数 `count`let x = 0;console.log(count);return  fn(count - 1)+x
}fn(5);

在实际开发中,为了避免使用未定义的变量,可以使用严格模式 ("use strict") 来帮助捕获未定义的变量

上面说到了严格模式:

简单的了解下什么是严格模式,我们可以通过使用严格模式 ("use strict") 来强制执行更严格的语法错误处理规则,其中包括捕获未定义的变量。

严格模式能够帮助我们更早地发现潜在的问题,因为我们可能有些东西在平时使用中被忽略或者遗忘的。

在Vue 2中,可以在单文件组件或者JavaScript文件顶部启用严格模式,加上"use strict"即可,

请注意,这行代码必须位于文件的最顶部,不能有任何代码出现在它的前面。

如下所示:

例如vue文件中:
<script>
"use strict";export default {// 组件定义
}
</script>
//------------------------------------
单独的纯js文件中:// 在 JavaScript 文件的顶部启用严格模式
"use strict";// 其他代码...

严格模式下会抛出的错误:

1.未定义变量报错: 在严格模式下,如果使用未声明的变量,会抛出 ReferenceError 错误。

2.删除不可删除的属性报错: 在严格模式下,尝试删除一个不可删除的属性会抛出 TypeError 错误。

3.禁止使用 with 语句: 在严格模式下,使用 with 语句会导致语法错误

WITH方法:

 由于大量使用with语句会导致性能下降,同时也会给调试代码造成困难,因此在开发大型应用程序时,不建议使用with语句,现在这个with已经废弃了

with 语句扩展一个语句的作用域链,语法为:

with (expression)  //将给定的表达式添加到在评估语句时使用的作用域链上。表达式周围的括号是必需的。statement  //任何语句。要执行多个语句,请使用一个块语句 ({ ... }) 对这些语句进行分组。

with'语句将某个对象添加到作用域链的顶部,如果在 statement 中有某个未使用命名空间的变量,跟作用域链中的某个属性同名,则这个变量将指向这个属性值。如果沒有同名的属性,则将拋出ReferenceError异常。

使用举例:

使用了JavaScript变量和Math对象的方法来计算。

var a, x, y;
var r = 10;with (Math) {a = PI * r * r;      //圆的面积x = r * cos(PI);     //计算了在极坐标系中半径为 r,角度为 PI 弧度的点的 x 坐标y = r * sin(PI / 2); //计算了在极坐标系中半径为 r,角度为 PI / 2 弧度的点的 y 坐标
}//其中:
with (Math) { ... }: 
这个语句块用于指定之后的代码中的变量或函数来自于 Math 对象。
这样可以省略每次引用 Math 对象的前缀。解决了像:(简单举例)获取对象obj的属性的值原来的:
var a = obj.a;
var b = obj.b;
var c = obj.c;使用with后:
with(obj){var a = a;var b = b;var c = c;
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

element plus dialog滚动条置顶问题

直接上解决方案了 <el-dialog v-model"DialogVisible" :destroy-on-close"true"><el-table :data"" :show-header"false" max-height"350"></el-table> </el-dialog>注意&#xff1a;主要是:destr…

WINHTTP忽略HTTPS证书

文章目录 WINHTTP忽略HTTPS证书WINHTTP使用TLS协议版本 WINHTTP忽略HTTPS证书 发布了Wininet库忽略Https证书文章之后有朋友问我如果使用WINHTTP发起忽略证书的方法, 下列粘出代码可以看到跟Wininet是一样的不在过多赘述&#xff0c;不懂的朋友可以看我发的链接说明。C发起Htt…

Spring-集成Web

一、引子 前面我们在Spring集成Junit中为读者引出了Spring善于集成其它框架的优势&#xff0c;而Spring项目不可能仅限于小范围的某个方法的测试&#xff0c;终究会落脚于Web项目上。于是&#xff0c;我们就从这里正式进入Spring集成Web的话题。由于笔者会从原生的Java Web开发…

@Test Annotation属性- dependsOnMethods属性

目录 语法 如果test1&#xff08;&#xff09;失败了怎么办&#xff1f;test2&#xff08;&#xff09;测试会发生什么&#xff0c;因为它依赖于test1&#xff1f; 如果我们在test1&#xff08;&#xff09;方法上不使用Test注释&#xff0c;但在test 2&#xff08;&#xf…

【产业实践】使用YOLO V5 训练自有数据集,并且在C# Winform上通过onnx模块进行预测全流程打通

使用YOLO V5 训练自有数据集,并且在C# Winform上通过onnx模块进行预测全流程打通 效果图 背景介绍 当谈到目标检测算法时,YOLO(You Only Look Once)系列算法是一个备受关注的领域。YOLO通过将目标检测任务转化为一个回归问题,实现了快速且准确的目标检测。以下是YOLO的基…

每日打卡 力扣2808 使循环数组所有元素相等的最少秒数

2808. 使循环数组所有元素相等的最少秒数 题目描述&#xff1a; 给你一个下标从 0 开始长度为 n 的数组 nums 。 每一秒&#xff0c;你可以对数组执行以下操作&#xff1a; 对于范围在 [0, n - 1] 内的每一个下标 i &#xff0c;将 nums[i] 替换成 nums[i] &#xff0c;num…

【centos系统ddos攻击】

centos系统ddos攻击&#xff0c;使用hping3和ab测试攻击模拟攻击 hping3工具 hping3 是一个命令行下使用的 TCP/IP 数据包组装/分析工具&#xff0c;通常 web 服务会用来做压力测试使 用&#xff0c;也可以进行 DOS 攻击的实验。同样 hping3 每次只能扫描一个目标。 安装hpin…

B2119 删除单词后缀

网址如下&#xff1a; B2119 删除单词后缀 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 算是找了个操作字符串的题来做 可以说C的string类确实是好用&#xff0c;但是还是不够熟悉&#xff0c;我不清楚怎么删去string类的后面几个字符 用C的常规做法是在相应地点设\0&…

2401cmake,学习cmake4

步10:增加生成式 生成器式是在构建系统生成时,执行的用来生成特定配置专有信息的工具. 可在诸如LINK_LIBRARIES,INCLUDE_DIRECTORIES,COMPILE_DEFINITIONS等许多目标属性内容中使用生成式. 也可在如target_link_libraries(),target_include_directories(),target_compile_de…

校园二手交易小程序|基于微信小程序的闲置物品交易平台设计与实现(源码+数据库+文档)

校园二手交易小程序目录 目录 基于微信小程序的闲置物品交易平台设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户信息管理 2、商品信息管理 3、公告信息管理 4、论坛信息管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕…

Vue之前端Broadcast Channel API的简单使用

前端Broadcast Channel API的简单使用 Broadcast Channel API 是一个用于在不同窗口或标签页之间进行通信的 API。它允许一个页面向另一个页面发送消息&#xff0c;这些页面可以在同一浏览器实例中打开&#xff0c;或者在不同的浏览器实例中打开。 以下是 Broadcast Channel …

R语言基础学习-02 (此语言用途小众 用于数学 生物领域 基因分析)

变量 R 语言的有效的变量名称由字母&#xff0c;数字以及点号 . 或下划线 _ 组成。 变量名称以字母或点开头。 变量名是否正确原因var_name2.正确字符开头&#xff0c;并由字母、数字、下划线和点号组成var_name%错误% 是非法字符2var_name错误不能数字开头 .var_name, var.…

蓝桥杯备战——11.NE555测频

1.分析原理图 我们可以看到&#xff0c;上图就是一个NE555构建的方波发生电路&#xff0c;输出方波频率1.44/2(R8Rb3)C,如果有不懂NE555内部结构&#xff0c;工作原理的&#xff0c;可以到B站学习。实在不懂仿真也行&#xff0c;比如我下面就是仿真结果&#xff1a; 然后就是下…

与数组相关经典面试题

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

su导入3d模型为什么不圆滑---模大狮模型网

在将SU(SketchUp)模型导入到其他3D软件中时&#xff0c;可能会遇到模型没有圆滑的情况。这可能是由于以下原因&#xff1a; 模型导出设置不正确&#xff1a;在导出SU模型时&#xff0c;需要确保正确选择导出设置。例如&#xff0c;在导出为.obj格式时&#xff0c;需要选择正确的…

免费的ChatGPT网站 ( 7个 )

ChatGPT的核心功能是基于用户在输入时的语言或文本生成相应的回复或继续内容。此外&#xff0c;它还能够完成多种任务&#xff0c;如撰写邮件、视频脚本、文案、翻译、代码编写以及撰写论文等。 博主归纳总结了7个国内非常好用&#xff0c;而且免费的chatGPT网站&#xff0c;AI…

信息安全风险评估

本文已收录至《全国计算机等级考试——信息 安全技术》专栏 简介 信息安全风险评估从早期简单的漏洞扫描、人工审计、渗透性测试这种类型的纯技术操作&#xff0c;逐渐过渡到目前普遍采用国际标准的BS7799、ISO17799、国家标准《信息系统安全等级评测准则》等方法&#xff0c;…

Unity 访问者模式(实例详解)

文章目录 实例1&#xff1a;简单的形状与统计访客实例2&#xff1a;游戏对象组件访问者实例4&#xff1a;Unity场景对象遍历与清理访客实例5&#xff1a;角色行为树访问者 访问者模式&#xff08;Visitor Pattern&#xff09;在Unity中主要用于封装对一个对象结构中各个元素的操…

VS之调用程序对DLL中全局变量的使用

接上篇《VS生成C动态链接库DLL》&#xff0c;能够生成DLL&#xff0c;且能调用后&#xff0c;遇到一个问题&#xff0c;即在DLL程序中定义了一些全局变量&#xff0c;应用程序需要使用&#xff0c;本以为可以直接使用&#xff0c;没想到&#xff0c;还是需要设置才可以&#xf…

秦始皇帝陵K0007陪葬坑文物展览与文物预防性保护的璀璨交汇

秦始皇帝陵博物院近日迎来了一场引人注目的展览——“何止秦俑——秦陵苑囿之K0007陪葬坑”。此次展览首次集中展示了K0007陪葬坑出土的别具一格的陶俑、鲜活灵动的青铜水禽等珍贵文物。然而&#xff0c;这些文物的安全展出离不开高科技的监测平台与实时终端的24小时不间断保护…