攻略前端面試官（二）：作用域和閉包

本文在個人主頁同步更新~

背就完事了

介紹：一些知識點相關的面試題和答案
使用姿勢：看答案前先嘗試回答，看完後把答案收起來檢驗成果~

理解小幫手

介紹：總結性的圖表或筆試題目和解析，讓知識點更容易懂

關於作用域，作用域鏈，以及變數提升和var,let,const和閉包的相關知識

下麵通過代碼分析來加深認識
註: 建議將複製到瀏覽器控制台，或者node環境下執行,手機的話建議橫屏~

var count = 0                               // 用來標識列印的序號
console.log(++count, song)                  // 輸出：1 undefined  解析：變數提升

// console.log(++count, artist)             // 報錯：'artist'不能在變數聲明前使用  解析：let沒有變數提升

var song = '說好不哭'
let artist = '奶茶倫'
const favorite = '奶茶'
const girlfriend = {
    name : '蔡依林'
}

console.log(++count, window.song)           // 輸出：2 說好不哭  解析：最外層用var聲明會掛載到window上

console.log(++count, window.artist)         // 輸出：3 undefined  解析：let聲明不會掛載到window

for(var i = 0; i < 10; i++ ) {}             // 在for中用var聲明變數i
for(let j = 0; j < 10; j++ ) {}             // 在for中用let聲明變數j

console.log(++count, i)                     // 輸出：4 10  解析：var沒有塊作用域

// console.log(++count, j)                  // 報錯：j沒有被定義  解析：let有塊作用域

// favorite = '咖啡'                        // 報錯：常量被賦值  解析：const聲明的變數不能被重新賦值
girlfriend.name = '昆凌'
console.log(++count, girlfriend)            // 輸出：5 {name:'昆凌'}  解析：const聲明的引用類型可以被改變

function cooperate () {
    console.log(++count, song)              // 輸出：6 說好不哭  解析：作用域鏈，往上層作用域找song
    var feat = undefined
    function getFeat (artistName) {         // 閉包 - 函數嵌套
        feat = artistName
        return feat
    }
    return getFeat                          // 將閉包暴露出來
}

// console.log(++count, feat)               // 報錯：feat沒有被定義  解析：feat在函數cooperate的作用域中，屬於局部變數

var getFeat = cooperate()                   // 創建一個閉包
console.log(++count, getFeat('阿信'))       // 輸出：7 阿信  解析：通過閉包成功列印cooperate函數中的feat屬性

getFeat = null                              // 閉包使用後需要手動釋放，不然會造成記憶體泄漏

相關筆試題思考

前端面試的筆試題或多或少會有一至兩道考核作用域的題目，如以下經典例子

function p1() { 
    console.log(1);
}
function p2() { 
    console.log(2);
}
(function () { 
    if (false) {
        function p1() {
            console.log(3);
        }
    }else{
        function p2(){
            console.log(4)
        }
    }
    p2();
    p1()
})();

解決這類問題的關鍵在於

1. 將所有變數，在紙上手動提升了再說，腦補容易有疏漏
2. 通過function 聲明的函數，也別忘了進行變數提升(function p1(){} 等同於 var p1 = function () {})
3. 分析作用域，一般會拿var沒有塊作用域來整事

var p1;                        // p1 = undefined  解析：變數提升
var p2;                        // p2 = undefined - 變數提升
function p1() {                // p1 = function () { 1 }
    console.log(1);
}
function p2() {                // p2 = function () { 2 }
    console.log(2);
}
(function () {                 // 匿名函數作用域
    var p1;                    // p1 = undefined  解析：變數提升，function p1(){} 等同於 var p1 = function () {}，var沒有塊作用域
    var p2;                    // p2 = undefined  解析：變數提升
    if (false) {
        function p1() {        // p1 = undefined  解析：因為if(false)，這塊代碼不會執行
            console.log(3);
        }
    }else{
        function p2(){         // p2 = funtcion() { 4 }
            console.log(4)
        }
    }
    p2();                      // 在當前作用域找到了p2，列印4
    p1()                       // 在當前作用域找到了p1，報錯：p1 is not a function
        })();       

以上！

Kane -- 一切都是命運石之門的選擇