ES6 Block-Level Function

zhjx922 发布于2019-08-20 13:50 / 1715人阅读

摘要：例行声明接下来的文字内容全部来自作者是也就是大名鼎鼎的高级程序设计的作者。从执行结果来看只有的结果是这个是我们之前已经讨论过了的在内部的作用域提升。结合和的结果来看，的作用域会被提升到整个，但只在其定义代码执行之后的区间。

例行声明：接下来的文字内容全部来自 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区间之内，是不可见的。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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