Vue从零开始总结10

这次不同以往，有个蛮有趣的东西叫做闭包，

闭包结构：(function(替换函数内变量的新变量){

             语句块

})(函数内变量)

下面我们先来看看如果没有闭包会造成怎样的后果吧

@一。当我们用有缺陷的var来定义变量时

html中

<button>第一</button>
<button>第二</button>
<button>第三</button>
<button>第四</button>
<button>第五</button>

js中

let btns=document.getElementsByTagName('button');
for (let i=0;i<btns.length;i++)
{
              btns[i].addEventListener('click',function (){
                  console.log('第' + i + '个按钮被点击');
              })
}

当有闭包存在时

html中

<button>第一</button>
<button>第二</button>
<button>第三</button>
<button>第四</button>
<button>第五</button>

js中

let btns=document.getElementsByTagName('button');
for (var i=0;i<btns.length;i++)
{
   (function (num)
           {
              btns[num].addEventListener('click',function (){
                  console.log('第' + num + '个按钮被点击');
              })
           }

   )(i)//此处闭包的i用num进行了替换
}

@二。当我们用let来定义变量时

let btns=document.getElementsByTagName('button');

for (let i=0;i<btns.length;i++)
{
   btns[i].addEventListener('click',function (){
       console.log('第' + i + '个按钮被点击');
   })
}

就不会出现var的问题

同样加入闭包

let btns=document.getElementsByTagName('button');
for (let i=0;i<btns.length;i++)
{
   (function (num)
           {
              btns[num].addEventListener('click',function (){
                  console.log('第' + num + '个按钮被点击');
              })
           }

   )(i)
}

也不会出现问题

所以为了保险起见还是写闭包的好！

之所以这么麻烦是因为在es5之前没有if和for的块级作用域的概念，所以必须得借助函数的作用域才行

但是在es6中开始有了这两个概念，而且引入的let更为使用，所以一般可以直接采用第二种的第一个简介写法，无需写闭包