foo聲明的地方并不能理解為塊級作用域，理解js的{}需要看{}的內(nèi)容

if(condition){
    var a = 1 // a在外部仍然是可以使用的，也存在作用域提升的問題，并不能當然塊級作用域考慮
}
// 如果是使用ES6的聲明
if(condition){
    let a = 1 // 此時的{}才會形成塊級作用域
}

foo函數(shù)雖然是在塊作用域內(nèi)生明的，但是他的上下文仍然指向window，因為他是使用 function xx(){} 這種形式生明的，而如果改成 let foo = function(){}這種生明方式，那么foo(4)就會報錯了

多說一句，函數(shù)內(nèi)生明和塊級作用域生明同理，只不過更嚴格，因為 var foo=functolion(){}，也能把函數(shù)的使用范圍限制住

在早期(es6之前)，Block-level 的函數(shù)是一個語法錯誤，但是被瀏覽器兼容且能夠執(zhí)行。所以你的代碼運行環(huán)境在 es5, 就會出現(xiàn)這種 foo(4) 的值為 4 的怪異現(xiàn)象。假若我們讓代碼執(zhí)行在 'use strict' 環(huán)境。

'use strict'
console.log(typeof foo)  // 'undefined'
{
    foo(2)    //2
    function foo(v) {
        console.log(v)
    }
    foo(3)    //3
}
console.log(typeof foo) // 'undefined'

也就是說，執(zhí)行完塊級作用域后，函數(shù) foo() 就被銷毀了。所以，如果要使用 Block-level 函數(shù)時，更好的替代是函數(shù)表達式。

foo(1)    //報錯
{
    foo(2)    // 報錯
    let foo = function (v) {
        console.log(v)
    }
    foo(3)    //3
}
foo(4) // 報錯

至于為什么在非 strict mode，foo(4) 不報錯，這應該就涉及到瀏覽器實現(xiàn)問題，對于我們理解這個問題并不重要。

參考Block-Level Functions