ES6 Block-Level Function

zhjx922 發(fā)布于2019-08-20 13:50 / 1842人閱讀

摘要：例行聲明接下來的文字內(nèi)容全部來自作者是也就是大名鼎鼎的高級(jí)程序設(shè)計(jì)的作者。從執(zhí)行結(jié)果來看只有的結(jié)果是這個(gè)是我們之前已經(jīng)討論過了的在內(nèi)部的作用域提升。結(jié)合和的結(jié)果來看，的作用域會(huì)被提升到整個(gè)，但只在其定義代碼執(zhí)行之后的區(qū)間。

例行聲明：接下來的文字內(nèi)容全部來自 Understanding ECMAScript 6,作者是Nicholas C.Zakas,也就是大名鼎鼎的Professional JavaScript for Web Developers（《JavaScript高級(jí)程序設(shè)計(jì)》）的作者。我很喜歡他的寫作風(fēng)格，所以在看了Understanding ECMAScript 6后試著自己寫篇博客梳理一下，相當(dāng)于簡(jiǎn)單地翻譯和鞏固一下吧。在此特別感謝Nicholas的原創(chuàng)，我只是一個(gè)小矮人，站在巨人的肩膀上，所以看到了原本看不到的風(fēng)景。
附上英文原文鏈接：https://leanpub.com/understan...

1: 背景介紹
在嚴(yán)謹(jǐn)模式下面，ES6之前，在一個(gè)block里面定義一個(gè)functoin是會(huì)拋出語法錯(cuò)誤的，例如：

"use strict";

if (true) {

    // Throws a syntax error in ES5, not so in ES6
    function doSomething() {
    // ...
    }
}

2: 如何定義一個(gè) block-level function

"use strict";
if(true){
    function a(){
        //...
    }
    console.log(typeof a);//function
}
console.log(typeof a); //undefined

在if創(chuàng)建的一個(gè)塊級(jí)作用域里面，我們定義了一個(gè)function a,然后在這個(gè)塊級(jí)作用域里面執(zhí)行typeof a,得到結(jié)果function,然后在if 創(chuàng)建的這個(gè)塊級(jí)作用域外去執(zhí)行typeof a,得到結(jié)果為undifined.這說明這個(gè)function a在其被定義的塊級(jí)作用域里面可見，在這個(gè)塊級(jí)作用域之外不可見。

3: block-level function的作用域提升
大家都知道，平常我們除了用1: function xx(){}這種方式來定義一個(gè)function外，也可以采用function expression: 2: let xx = function(){}.在用這兩種方式來定義的block-level function在作用域提升的表現(xiàn)方面是截然不同的: 第一種會(huì)提升，第二種不會(huì)。，舉例說明：

"use strict";
if(true){
    console.log(typeof a)//function
    function a(){
        /...
    }
}

"use strict";
if(true){
    console.log(typeof a)// uncaught ReferenceError: a is not defined
    let a = function(){
        /...
    }
}

從上面的對(duì)比可以看出，用let定義的function，作用域不會(huì)提升，當(dāng)執(zhí)行typeof a的時(shí)候，拋出一個(gè)錯(cuò)誤。
4: 在非嚴(yán)謹(jǐn)模式下block-level function的作用域
在前面的1，2， 3點(diǎn)，我們都是在嚴(yán)格模式下面的探討。但是，block-level funciton的作用域提升在嚴(yán)格模式和非嚴(yán)格模式下面的表現(xiàn)是不一樣的。
4.1: 用 let xx = function(){}也就是用function expression這種方式定義的block-level function在嚴(yán)格模式和非嚴(yán)格模式下表現(xiàn)一樣：會(huì)拋出錯(cuò)誤uncaught ReferenceError: xx is not defined.所以不做過多討論。

4.2: 現(xiàn)在來看一個(gè)用function xx(){}的方式定義block-level funciton時(shí)的表現(xiàn)，且這個(gè)block是在另一個(gè)function里面

上圖是在Chrome Version 55.0.2883.95下面執(zhí)行的結(jié)果。

＊從執(zhí)行結(jié)果來看只有output 2的結(jié)果是function,這個(gè)是我們之前已經(jīng)討論過了的在block內(nèi)部的作用域提升。
＊結(jié)合ouput 1和output 3的結(jié)果來看，block-level function的作用域會(huì)被提升到整個(gè) function，但只在其定義代碼執(zhí)行之后的區(qū)間。
＊ output 4的結(jié)果表明，此種場(chǎng)景下，作用域并不會(huì)被提升至global.

4.3 在global下面的block里面定義一個(gè)block-level function

從執(zhí)行結(jié)果看來，此種場(chǎng)景下，作用域會(huì)被提升至global,但是也得是在其定義之后的區(qū)間，在其被定義的block之前的global區(qū)間之內(nèi)，是不可見的。