块级作用域问题

最新推荐文章于 2022-02-10 15:36:06 发布
最新推荐文章于 2022-02-10 15:36:06 发布
阅读量92 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46054543/article/details/113429701
版权
本文探讨了在JavaScript中使用for循环遍历按钮时遇到的问题，即每次显示的都是最后一个i的值。原因在于for循环没有独立的作用域，导致变量i在循环结束后保持最后一次迭代的值。解决此问题的方法是利用闭包来创建每个按钮点击事件的独特作用域，确保每个按钮能够正确显示其对应的i值。通过这个案例，深入理解JavaScript作用域和闭包的概念对于前端开发至关重要。
摘要由CSDN通过智能技术生成

假设有五个按钮
利用for循环遍历这五个按钮
点击第i个按钮显示第i个按钮被点击
得到的结果却是：每次显示的都是遍历的最后第i个按钮

问题的原因：就在于for循环没有作用域
解决办法有：加个闭包，因为函数是一个作用域
在这里插入图片描述

产品迪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript的作用域和块级作用域概念理解
10-25
在ES6及以后的版本中，使用`let`和`const`关键字可以更好地实现块级作用域，从而避免一些由函数作用域带来的问题。同时，通过利用函数作用域和闭包特性，我们可以有效地管理变量和函数，提升代码质量。
JavaScript使用闭包模仿块级作用域操作示例
10-17
为了解决这个问题，开发者可以使用闭包和函数包装器来模拟块级作用域。函数包装器是一个立即执行的匿名函数，它可以在自身的作用域内创建变量，这样这些变量就不会污染外部作用域。 例如： ```javascript function...
ES6 块级作用域解决的一些问题
归子莫的博客
07-01 317
ES6 块级作用域解决的一些问题 文章目录ES6 块级作用域解决的一些问题简介问题一：内层变量覆盖外层变量问题二：在for循环中的循环变量泄漏为全局变量ES6的块级别作用域函数声明函数表达式和函数声明作用域的标识 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 简介 在ES5中没有块级作用域，这出现了许多的问题，ES6中新增了块级作用域 问题一：内层变量覆盖外层变量 由于使用var声明的变量，存在变量提升，在内层的tmp会覆盖掉外
块级作用域
qq_45178972的博客
03-28 69
使用let,const定义的变量或方法不会变成window的，而var则会 1.块级作用域：如for语句块， var没有块级作用域，就相当于在全局作用域一样 let,const 有块级作用域，只能在该作用域内访问
通过自执行函数实现块级作用域时变量作用域问题。
xu3tu的博客
04-11 828
今天看见块级作用域是发现了一个愚昧的问题，在此记录一下，谨记： var a = 0; (function(){ var a = a; console.log(a); })() 上述代码显示undefined，我还以为是输出0呢。后来想了想，知道了自己哪里错了，在此写详细点，怕有同样问题的小白疑惑： 全局变量： a，a=undefined,a=0; ...
块级作用域的作用
weixin_37480339的博客
03-10 1375
在es5中只有全局作用域和函数作用域，导致一些场景不合理 1. 内层变量会覆盖外层变量 var tmp = new Date(); function f(){ console.log(tmp) if(false){ var tmp = 'hello' } } f()//undefined 原因： 变量提升，导致内层变量tmp覆盖了外层tmp变量 2. 用来计数的循环...
为什么JavaScript没有块级作用域
10-22
主要介绍了为什么JavaScript没有块级作用域的相关资料,需要的朋友可以参考下
解析JavaScript模仿块级作用域
10-20
JavaScript 语言本身并不支持真正的块级作用域，这意味着在大括号({})内定义的变量在该块外部依然可以访问。然而，为了实现类似的作用域限制，开发者常常使用某些技巧来模拟块级作用域，其中最常用的是匿名函数和...
块级作用域与局部作用域
qq_43928083的博客
06-21 695
js三种作用域 作用域概念 变量可以起作用的范围区域 ES5 有两种作用域 a.全局作用域(Global Scope) ： 函数外面声明的变量,称之为全局变量。 可以在页面任何地方被访问 全局变量生命周期 ： 从页面加载 -> 到页面关闭 b.局部作用域(Local Scope) : 函数里面声明的变量,称之为局部变量。 只能在函数里面被访问 局部变量生命周期 ： 从函数开始执行 -> 到函数执行结束 ES6 在ES5原有基础上新增第三种作用域 c.块级作用域(Block Scope) : (
块级作用域的理解
m0_65937359的博客
02-10 9577
块级作用于的概念 作用域永远都是任何一门语言的重中之中，因为它控制着变量和参数的可见性和生命周期。讲到这里，首先要理解两个概念：块作用域和函数作用域。什么是块级作用域呢？ 任何一对花括号({})中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。 函数作用域就更好理解了定义在函数中的参数和变量在函数外是不可见的。 作用域分析 function fn1(x) { var a = 0; let b = 0; { var c = 1; // 未用le
JavaScript的执行机制——块级作用域
前端探险家的博客
05-24 2688
块级作用域作用域（scope）变量提升所带来的问题变量容易在不被察觉的情况下被覆盖掉本应销毁的变量没有被销毁ES6 是如何解决变量提升带来的缺陷JavaScript 是如何支持块级作用域的 作用域（scope） 为什么 JavaScript 中会存在变量提升这个特性，而其他语言似乎都没有这个特性呢？要讲清楚这个问题，我们就得先从作用域讲起。 作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。 在 ES6 之
C#_方法与作用域
github_28526077的博客
09-18 1005
局部变量仅在方法内可用，字段(类的成员变量)在方法间共享信息。          Visual Studio可以根据方法的调用语句自动生成方法存根，形参名称由传入实参的名称生成，可自行修改。有时参数、返回值类型会是Object类型即任何对象，可以按情况修改成需要的类型。          格式化输出占位符,例如：  Console.WriteLine("The consultant's fe
js块级作用域--理解
huohua0612的专栏
05-11 4879
在JavaScript中没有块级作用域的概念。这意味着在块级语句中定义的变量，实际上是包含在函数中的，而不是在语句中创建的，下面来看一个例子： function testdemo(){ for(var i=0;i<10;i++){ } alert(i); } testdemo(); 最后输出的是：10。 在javaScript中，变量 i 是在testdemo()函的...
js的函数作用域跟块级作用域
huangjq36SYSU的博客
04-07 9908
一，js中的作用域     js中除了全局作用域，还有函数作用域。     嗯，还有块级作用域。 二，函数作用域跟块级作用域的区别     当将代码看成一个IIFE时，全局作用域其实就是一个函数作用域。     那么函数作用域跟块级作用域的区别是什么呢？           函数作用域：变量在定义的函数内及嵌套的子函数内处处可见；           块级函数域：变量在离开定义的块级
块级作用域和函数作用域
weixin_47731512的博客
11-23 1927
1.块级作用域 什么是块级作用域？ {} 这个花括号里面的作用域就是块级作用域。 var i = 100 for(var i=0; i<5; i++){ console.log(i) //1,2,3,4 } console.log(i) //5 使用var的话就会导致在for循环里面的i覆盖掉了上面的i，然后i的值就发生了改变，所以我们需要一块私有领域来包裹住for里面产生的变量，所以产生了块级作用域。 解决方法：换成let或者const就OK了。 再 //外层作用域无法获取内层作用域 fu
函数作用域与块级作用域
轩逸云的博客
12-01 957
块级作用域即 {......} 尽管js支持一堆花括号创建的代码，但是并不支持块级作用域；而仅仅支持函数作用域。 //js中的函数作用域 function test(){   for(var i=0;i&lt;19;i++){     document.write(i);   }   document.write(i);//10,此时i还在作用域内 } //c#中的块级作用域 ...
如何获取body和html元素？
46054543的博客
11-01 5416
如何获取body和html元素？ body和html元素的获取方式与普通元素不同 代码如下（示例）： var myBody = document.body; console.log(myBody); var myHtml = document.documentElement; console.log(myHtml); ...
块级作用域怎么替代IIFE
最新发布
05-20
在ES6中，引入了块级作用域的概念，可以使用let或const关键字来声明块级作用域变量。因此，可以将IIFE替换为使用块级作用域来达到同样的效果。 举个例子，假设我们有一个需要在函数内部使用的计数器变量，可以使用IIFE实现： ``` var counter = (function() { var count = 0; return { increment: function() { count++; }, getCount: function() { return count; } }; })(); ``` 使用块级作用域可以这样实现： ``` { let count = 0; var counter = { increment: function() { count++; }, getCount: function() { return count; } }; } ``` 在这个例子中，我们使用了一个块级作用域来封装计数器变量。由于let和const声明的变量只在块级作用域内有效，所以变量count只能在块级作用域内访问。同时，我们将counter对象暴露在函数外部，可以在外部使用该对象中的方法来操作计数器变量。 通过使用块级作用域来代替IIFE，可以使代码更加简洁和易于理解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值