es6中引入了什么作用域

166 阅读 0 评论 110 点赞

我是靠谱客的博主灵巧犀牛，这篇文章主要介绍es6中引入了什么作用域，现在分享给大家，希望可以做个参考。

本教程操作环境：windows10系统、ECMAScript 6.0版、Dell G3电脑。

es6中引入了什么作用域

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

ES6标准中，由一对大括号包裹形成的作用域就是块级作用域。

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

（1）内层变量可能会覆盖外层变量。

复制代码    var tmp = new Date();
    function f() {
        console.log(tmp);
        if (false) {
            var tmp = 'hello world';
        }
    }
    f();//undefined1
2
3
4
5
6
7
8
var tmp = new Date();
    function f() {
        console.log(tmp);
        if (false) {
            var tmp = 'hello world';
        }
    }
    f();//undefined
登录后复制

（2）用来计数的循环变量泄露为全局变量

复制代码    var s = 'hello';
    for (var i = 0; i < s.length; i++) {
        console.log(s[i]);//h e l l o
    }
    console.log(i);//51
2
3
4
5
var s = 'hello';
    for (var i = 0; i < s.length; i++) {
        console.log(s[i]);//h e l l o
    }
    console.log(i);//5
登录后复制

变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

示例如下：

复制代码// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }
  f();
}());
// Uncaught TypeError: f is not a function1
2
3
4
5
6
7
8
9
10
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }
  f();
}());
// Uncaught TypeError: f is not a function
登录后复制

在ES6标准中，在块级作用域中声明函数，会将函数声明当做由var声明的变量，提升到块级作用域顶部，只将函数当做变量进行变量名声明，并不会声明函数体，上述代码相当于：

复制代码// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }
  f();
}());
// Uncaught TypeError: f is not a function1
2
3
4
5
6
7
8
9
10
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }
  f();
}());
// Uncaught TypeError: f is not a function
登录后复制

【相关推荐：javascript视频教程、web前端】

以上就是es6中引入了什么作用域的详细内容，更多请关注靠谱客其它相关文章！