ES6 Block-Level Function

zhjx922 發布于2019-08-20 13:50 / 1836人閱讀

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

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

1: 背景介紹
在嚴謹模式下面，ES6之前，在一個block里面定義一個functoin是會拋出語法錯誤的，例如：

"use strict";

if (true) {

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

2: 如何定義一個 block-level function

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

在if創建的一個塊級作用域里面，我們定義了一個function a,然后在這個塊級作用域里面執行typeof a,得到結果function,然后在if 創建的這個塊級作用域外去執行typeof a,得到結果為undifined.這說明這個function a在其被定義的塊級作用域里面可見，在這個塊級作用域之外不可見。

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

"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(){
        /...
    }
}

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

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

上圖是在Chrome Version 55.0.2883.95下面執行的結果。

＊從執行結果來看只有output 2的結果是function,這個是我們之前已經討論過了的在block內部的作用域提升。
＊結合ouput 1和output 3的結果來看，block-level function的作用域會被提升到整個 function，但只在其定義代碼執行之后的區間。
＊ output 4的結果表明，此種場景下，作用域并不會被提升至global.

4.3 在global下面的block里面定義一個block-level function

從執行結果看來，此種場景下，作用域會被提升至global,但是也得是在其定義之后的區間，在其被定義的block之前的global區間之內，是不可見的。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81263.html

ES6語法特性 - ES6 - ECMAScript特性 - Javascript核心

摘要：前三個是為了解決變量聲明定義的問題，而最后一個則影響最大。下文只介紹前三個特性。這是因為的的不支持塊級作用域，變量僅僅被限制到函數作用域內。原文： http://pij.robinqu.me/JavaScript_Core/ECMAScript/es6/es6_syntax_features.html 源代碼： https://github.com/RobinQu/P...

Joyven 2019-08-19 14:50 評論0 收藏0
ES6語法特性 - ES6 - ECMAScript特性 - Javascript核心

摘要：前三個是為了解決變量聲明定義的問題，而最后一個則影響最大。下文只介紹前三個特性。這是因為的的不支持塊級作用域，變量僅僅被限制到函數作用域內。原文： http://pij.robinqu.me/JavaScript_Core/ECMAScript/es6/es6_syntax_features.html 源代碼： https://github.com/RobinQu/P...

StonePanda 2019-08-19 14:50 評論0 收藏0
ES6語法特性 - ES6 - ECMAScript特性 - Javascript核心

摘要：前三個是為了解決變量聲明定義的問題，而最后一個則影響最大。下文只介紹前三個特性。這是因為的的不支持塊級作用域，變量僅僅被限制到函數作用域內。原文： http://pij.robinqu.me/JavaScript_Core/ECMAScript/es6/es6_syntax_features.html 源代碼： https://github.com/RobinQu/P...

jas0n 2019-08-19 14:50 評論0 收藏0
Javascript作用域和變量提升

摘要：有何區別在中，存在關鍵字，它聲明的變量同樣存在塊級作用域。而且函數本身的作用域，只存在其所在的塊級作用域之內，例如重復聲明一次函數上面這段代碼在中的輸出結果為因為被條件語句中的上升覆蓋了。如果對的使用，或的其他新特性感興趣，請自行閱讀文檔。引子首先大家看一下下面的代碼，猜猜會輸出什么結果？ var foo = 1; function bar() { if (!foo) { ...

whlong 2019-08-21 10:37 評論0 收藏0
ES6對函數的改動

摘要：改動函數的改變不算太大，都是一些其他語言早就有的功能，而一直比較欠缺的，比如函數參數默認值，任意參數的表示法，最大的變化應該是支持箭頭函數其他語言稱之為表達式，一種對匿名函數的一種簡寫方式，以下來探討一下函數在中的一些改變默認參數任意參數操 ES6 functions改動 ????ES6函數的改變不算太大，都是一些其他語言早就有的功能，而Javascript一直比較欠缺的，比如函數參數...

kk_miles 2019-08-22 10:38 評論0 收藏0