這次不同以往，有個(gè)蠻有趣的東西叫做閉包，

閉包結(jié)構(gòu)：(function(替換函數(shù)內(nèi)變量的新變量){

? ? ? ? ? ? ?語句塊

})(函數(shù)內(nèi)變量)

下面我們先來看看如果沒有閉包會(huì)造成怎樣的后果吧

@一。當(dāng)我們用有缺陷的var來定義變量時(shí)

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?+ '個(gè)按鈕被點(diǎn)擊');
? ? ? ? ? ? ? })
}

當(dāng)有閉包存在時(shí)

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 + '個(gè)按鈕被點(diǎn)擊');
? ? ? ? ? ? ? })
? ? ? ? ? ?}

? ?)(i)//此處閉包的i用num進(jìn)行了替換
}

@二。當(dāng)我們用let來定義變量時(shí)

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

for (let i=0;i<btns.length;i++)
{
? ?btns[i].addEventListener('click',function (){
? ? ? ?console.log('第' + i + '個(gè)按鈕被點(diǎn)擊');
? ?})
}

就不會(huì)出現(xiàn)var的問題

同樣加入閉包

let btns=document.getElementsByTagName('button');
for (let i=0;i<btns.length;i++)
{
? ?(function (num)
? ? ? ? ? ?{
? ? ? ? ? ? ? btns[num].addEventListener('click',function (){
? ? ? ? ? ? ? ? ? console.log('第' + num + '個(gè)按鈕被點(diǎn)擊');
? ? ? ? ? ? ? })
? ? ? ? ? ?}

? ?)(i)
}

也不會(huì)出現(xiàn)問題

所以為了保險(xiǎn)起見還是寫閉包的好！

之所以這么麻煩是因?yàn)樵趀s5之前沒有if和for的塊級作用域的概念，所以必須得借助函數(shù)的作用域才行

但是在es6中開始有了這兩個(gè)概念，而且引入的let更為使用，所以一般可以直接采用第二種的第一個(gè)簡介寫法，無需寫閉包