首页 > web前端 > js教程 > ES6中块级作用域的详细介绍(代码示例)

ES6中块级作用域的详细介绍(代码示例)

不言
发布: 2019-01-18 10:55:01
转载
2898 人浏览过

本篇文章给大家带来的内容是关于ES6中块级作用域的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

今天,来探讨一下ES6中的块级作用域。

全局作用域和函数作用域

在ES5中,只全局作用域和函数作用域。这会导致函数作用域覆盖了全局作用域;亦或者循环中的变量泄露为全局变量。

例如:

//  1.函数作用域覆盖了全局作用域,发生了变量提升,函数声明大于var声明的变量,因此函数里面的a提到了前面,在打印a,初始化一个undefined给a,所以打印出了undefined。
var a = '1';
function fn() {
    console.log(a);
    if (3<2) {
        var a  = 3;
    }
}
fn(); // undefined
// 2.循环中的变量泄露为全局变量
for(var i=0;i<5;i++) {
    console.log(i);
}
console.log(i); // 5;
登录后复制

ES6的块级作用域

用let命令新增了块级作用域,外层作用域无法获取到内层作用域,非常安全明了。即使外层和内层都使用相同变量名,也都互不干扰。

// 1.外层作用域无法获取到内层作用域
function fn1() {
    let a = 41;
    if(1 == 1) {
        let a = 3;
        console.log(2,a); // 2 3
    }
    console.log(1,a); // 1 41
}
fn1();

{  
    {
        let food = &#39;apple&#39;;
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

{  
    {
        let food = &#39;apple&#39;;
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

// 2. 外层和内层都使用相同变量名,也都互不干扰
{  
    {
        let food = &#39;apple&#39;;
        console.log(food); // apple
    }
    let food = &#39;orange&#39;;
    console.log(food); // orange
}
登录后复制

块级作用域和和函数声明

在ES5中,函数只能在顶级作用域和函数作用域中声明,不能在块级作用域中声明。但是在ES6中,函数可以在块级作用域中声明。

但是会有一定的问题,因为函数声明会被提到代码的最前面。所以会报错,最好在ES6中用函数表达式来表示一个函数。

例如:

//1.函数声明报错
{
    if (4 < 2) {
        function fn() {
            console.log(&#39;我在函数里面!&#39;);
        }
    }
}
fn(); // Uncaught TypeError: fn is not a function
//2.函数表达式没错
{
    let fa = &#39;111&#39;;
    let fn = function () {
        console.log(&#39;我在函数里面!&#39;);
    }
    console.log(fa,fn); // 111 ƒ () { console.log(&#39;我在函数里面!&#39;);}
}
登录后复制

注意:ES6中允许函数在块级作用域中可以声明的条件是必须在大括号里面,否则就会报错。

// 1.报错的情况
if (4>2) {
    let fn = function () {};
}

//2.报错的情况
if (4>2)
    let fn = function () {}; // Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context
登录后复制

以上是ES6中块级作用域的详细介绍(代码示例)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
es6
来源:cnblogs.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板