首页 > 其他分享 >在前端学习中我遇到的问题以及解决方法总结之一

在前端学习中我遇到的问题以及解决方法总结之一

时间:2022-12-19 21:34:04浏览次数:37  
标签:总结 函数 遇到 作用域 前端 点击 let 解决 变量

练习:首先在页面中写四个button,点击其中一个按钮在控制台打印点击了那个按钮的值
首次思考后实现的代码

遇到的问题:采用for循环监听事件绑定函数的过程中没有考虑函数作用域的问题导致打印出现问题
当点击事件未发生时i一直在累加一直到5结束而且因为for循环本身没有作用域所以i会作为全局变量在全局作用域中而此时发生点击事件此事件绑定的函数的作用域里面没有相应的变量i那么就会在这个函数的上一级作用域即全局作用域里寻找此时i为5再加1等于6就会出现如图的情况

解决方法:方法一使用立即执行函数建立作用域将for循环中的i记录并传递
这个方法的解决原理:在其外面使用立即执行函数记录i的值并作为参数传递同时在函数的局部作用域里使用立即执行函数传递的参数所以打印的其实是立即执行函数的参数
代码如下

解决成功!!

方法二:for循环定义变量采用let
这个方法是es6的语法因为使用let声明的变量不能重复声明最重要的是具有块级作用域
解决过程:当事件函数的作用域中没有变量i是会在上一级的作用域里寻找此时let因为具有块级作用域而且此时变量i就存在就不在全局里面找因此巧妙的解决了这个问题
代码如下

谢谢观看,本人也是小白.要是什么地方出现问题,欢迎指教。。。

标签:总结,函数,遇到,作用域,前端,点击,let,解决,变量
From: https://www.cnblogs.com/zhang1first/p/16993112.html

相关文章