內容導讀

這次主要用例子解釋一下什麼是作用域，什麼是自由變量，什麼是閉包，因為用一句話概括實在是概括不出來，歡迎有大神可以一句話解釋的在評論區評論一下，十分感謝。

這次主要用例子解釋一下什麼是作用域，什麼是自由變量，什麼是閉包，因為用一句話概括實在是概括不出來，歡迎有大神可以一句話解釋的在評論區評論一下，十分感謝。

1. 說一下變量提升的理解

以下兩種情況下會進行變量提示

1. 變量定義
2. 函數申明（要區分函數表達式和函數申明）

2. 說明this幾種不同的使用場景

1. 在構造函數中使用
2. 作為對象屬性時使用
3. 作為普通函數時使用
4. call，apply，bind

var a = { name: 'A', fun: function() { console.log(this.name); }};a.fun(); //this === aa.fun.call({ name: 'B' }); //this === { name: 'B' }var fun1 = a.fun;fun1(); //this === window

3. 創建10個a標籤，點擊每個彈出對應的序號

• 錯誤的例子：

// 在點擊a標籤時每個輸出的都是10var i, a;for (i = 0; i < 10; i++) { a = document.createElement('a'); a.innerHTML = i + '
'; a.addEventListener('click', function(e) { e.preventDefault(); alert(i); //自由變量，會從父元素找i，點擊時，其實i已經執行完變成了10 }); document.body.appendChild(a);}

• 使用閉包改進的例子：

當然，在ES6中可以使用let

var i;for (i = 0; i < 10; i++) { (function(i) { // 函數作用域 var a = document.createElement('a'); a.innerHTML = i + '
'; a.addEventListener('click', function(e) { e.preventDefault(); alert(i); }); document.body.appendChild(a); })(i);}

4. 如何理解作用域

1. 自由變量
2. 作用域鏈，及自由變量的查找，找不到逐級向上找
3. 閉包的兩個場景：
4. 3.1 函數作為變量傳遞
5. 3.2. 函數作為返回值

5. 實際開發中閉包的應用

// 判斷一個數字是否出現過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); 

閱讀更多 浮生偷閒 的文章

關鍵字: 概括 技術 面試