ES6语法(一)-1.变量的块级作用域

ES6中定义变量可以使用let和const，ES6之前只能使用var。

而let在for,if,函数中是有块级作用域，var在for,if模块中没有块级作用域，只有函数中有块级作用域

下面的例子中，点击界面按钮，在使用var时，由于var变量没有块级作用域，而程序在循环，虽然点击了第一个按钮，但是i继续循环，i没有块级作用域，所以循环完毕则显示打印最后一个按钮被点击。

而使用了闭包（对于var变量）或则定义let后，变量就有了块级作用域，点击第一个按钮，则显示第一个按钮被打印

闭包相当于一个封闭的函数：

// 闭包前面是一个函数(function(i){})，后面是函数参数(i)
 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 01-块级作用域.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/1 10:02
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>01-块级作用域</title>
16   <style>
17       .c1 {
18           color: red;
19       }
20 
21       .c2 {
22           color: blue;
23       }
24 
25       .c3 {
26           color: green;
27       }
28   </style>
29 </head>
30 <body>
31 <button class="c1">按钮1</button>
32 <button class="c1">按钮2</button>
33 <button class="c1">按钮3</button>
34 <button class="c2">按钮4</button>
35 <button class="c2">按钮5</button>
36 <button class="c2">按钮6</button>
37 <button class="c3">按钮7</button>
38 <button class="c3">按钮8</button>
39 <button class="c3">按钮9</button>
40 <script>
41   // 1.变量作用域：var变量在if模块内没有块级作用域
42   {
43     var name = 'invoker'
44     console.log(name);
45   }
46   console.log(name);
47 
48   // 2.变量作用域：var变量在for模块内没有块级作用域
49   var btns = document.getElementsByClassName('c1')
50   for (var i = 0; i < btns.length; i++) {
51     btns[i].addEventListener('click', function () {
52       console.log('第' + i + '个Button被点击')
53     })
54   }
55 
56   // 4.es5为了解决var变量在for模块和if模块没有块级作用域，使用了闭包函数
57   var btns3 = document.getElementsByClassName('c3')
58   for (var i = 0; i < btns3.length; i++) {
59     (function (i) {
60       btns3[i].addEventListener('click', function () {
61         console.log('第' + i + '个Button被点击')
62       })
63     })(i)
64   }
65   // 5.变量作用域：let变量在for模块和if模块中均内有块级作用域
66   const btns2 = document.getElementsByClassName('c2')
67   for (let i = 0; i <= btns2.length; i++) {
68     btns2[i].addEventListener('click', function () {
69       console.log('第' + (i + 1) + '个Button被点击')
70     })
71   }
72 </script>
73 </body>
74 </html>

 

 

 

 

 

 

 

posted @ 2021-07-01 10:34  kaer_invoker  阅读(79)  评论(0)  编辑  收藏  举报