Vue学习笔记——块级作用域的学习

最新推荐文章于 2024-09-22 14:49:07 发布

mysteper

最新推荐文章于 2024-09-22 14:49:07 发布

阅读量547

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/mysteper/article/details/121459806

版权

本文探讨了ES5与ES6在处理块级作用域上的差异，特别是在涉及循环和异步事件绑定时的问题。通过示例展示了在ES5中，由于var变量的作用域导致异步回调函数引用的是循环结束后的i值。为了解决这个问题，文章介绍了两种解决方案：一是使用立即执行函数表达式（IIFE）创建闭包，二是利用ES6的let关键字，它为每个循环迭代提供了独立的作用域。这两种方法都能确保点击事件正确地输出对应的按钮索引。

摘要由CSDN通过智能技术生成

与ES5相比，ES6引入了块级作用域的概念，由于ES5没有块级作用域，当循环中绑定异步事件时，由于for循环是同步，而事件是异步调用，且使用var变量作用域不为块级作用域，则事件执行的变量值永远是for循环的最后一个值。

<button>1</button>
<button>2</button>
<button>3</button>
 <script>
   var btn = document.getElementsByTagName('button');
   for(var i = 0;i < btn.length;++i) {
     btn[i].addEventListener("click",function () {
       console.log('当前点击按钮为：' + i);
     })
   }
 </script>

考虑用闭包的形式，可写为:

<button>1</button>
<button>2</button>
<button>3</button>
 <script>
   var btn = document.getElementsByTagName('button');
   for(var i = 0;i < btn.length;++i) {
     (function (CurNum) {
       btn[CurNum].addEventListener("click",function () {
         console.log('当前点击按钮为：' + Number(CurNum + 1));
       })
     })(i)
   }
 </script>

呈现效果为:

也可使用es6语法，将i的赋值改为let，这是因为let拥有了块作用域的概念:

<button>1</button>
<button>2</button>
<button>3</button>
 <script>
   var btn = document.getElementsByTagName('button');
   for(let i = 0;i < btn.length;++i) {
       btn[i].addEventListener("click",function () {
         console.log('当前点击按钮为：' + Number(i + 1));
       })
   }
 </script>