這次主要用例子解釋一下什么是作用域芥颈，什么是自由變量，什么是閉包角钩，因?yàn)橛靡痪湓捀爬▽?shí)在是概括不出來(lái)吝沫，歡迎有大神可以一句話解釋的在評(píng)論區(qū)評(píng)論一下，十分感謝彤断。
1. 說(shuō)一下變量提升的理解
以下兩種情況下會(huì)進(jìn)行變量提示
- 變量定義
- 函數(shù)申明（要區(qū)分函數(shù)表達(dá)式和函數(shù)申明）
2. 說(shuō)明this幾種不同的使用場(chǎng)景
- 在構(gòu)造函數(shù)中使用
- 作為對(duì)象屬性時(shí)使用
- 作為普通函數(shù)時(shí)使用
- call野舶，apply，bind
var a = {
name: 'A',
fun: function() {
console.log(this.name);
}
};
a.fun(); //this === a
a.fun.call({ name: 'B' }); //this === { name: 'B' }
var fun1 = a.fun;
fun1(); //this === window
3. 創(chuàng)建10個(gè)a標(biāo)簽宰衙，點(diǎn)擊每個(gè)彈出對(duì)應(yīng)的序號(hào)
- 錯(cuò)誤的例子：
// 在點(diǎn)擊a標(biāo)簽時(shí)每個(gè)輸出的都是10
var i, a;
for (i = 0; i < 10; i++) {
a = document.createElement('a');
a.innerHTML = i + '<br>';
a.addEventListener('click', function(e) {
e.preventDefault();
alert(i); //自由變量平道，會(huì)從父元素找i，點(diǎn)擊時(shí)供炼，其實(shí)i已經(jīng)執(zhí)行完變成了10
});
document.body.appendChild(a);
}
- 使用閉包改進(jìn)的例子：
當(dāng)然一屋，在ES6中可以使用let
var i;
for (i = 0; i < 10; i++) {
(function(i) {
// 函數(shù)作用域
var a = document.createElement('a');
a.innerHTML = i + '<br>';
a.addEventListener('click', function(e) {
e.preventDefault();
alert(i);
});
document.body.appendChild(a);
})(i);
}
4. 如何理解作用域
- 自由變量
- 作用域鏈，及自由變量的查找袋哼，找不到逐級(jí)向上找
- 閉包的兩個(gè)場(chǎng)景：
3.1 函數(shù)作為變量傳遞
3.2. 函數(shù)作為返回值
5. 實(shí)際開(kāi)發(fā)中閉包的應(yīng)用
// 判斷一個(gè)數(shù)字是否出現(xiàn)過(guò)
function isFirst() {
var _list = [];
return function(id) {
if (_list.indexOf(id) >= 0) {
return false;
} else {
_list.push(id);
return true;
}
};
}
var first = isFirst();
first(10);
first(10);
first(20);
