ES6入门（一）：块级作用域

最新推荐文章于 2024-07-18 18:06:03 发布

择思

最新推荐文章于 2024-07-18 18:06:03 发布

阅读量1.8k

点赞数

分类专栏： Javascript/Typescript

本文链接：https://blog.csdn.net/jaytalent/article/details/52963522

版权

Javascript/Typescript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

我们知道，在ES5及之前的JavaScript标准中是没有定义块级作用域的。这导致在编程时会意外地犯一些微妙的错误。例如，局部变量提升会将全局变量的定义覆盖；for循环的局部变量在循环结束后依然有效等等。ES6标准引入了块级作用域的概念，结合let关键字，可以解决上述问题。一般的用法如下：

function func() {
  let n = 1;
  if (true) {
    let n = 10;
  }
  console.log(n); // 1
}

这样写代码，变量的作用域更加明晰，有利于减少不必要的失误。上述代码中如果将let改为var，则输出就是10了。因为，if块内的局部变量n的声明提升到 函数作用域func的顶端，覆盖了if块外的n的声明。注意，这里变量提升仍然是在某个作用域范围内的，此例中是函数func的作用域，而不会超出该作用域。这就是说，如果func外还有一个n的定义，例如：

var n = 0
function func() {
  var n = 1;
  if (true) {
    var n = 10;
  }
  console.log(n); // 10
}
console.log(n); // 0

由于ES5有函数作用域的概念，func内部的变量n在该函数外就不可见了。因此，最外层的n值始终为0。下面举一个更加实际的例子，我在某个WebApp中引入了jquery库，并在自己的代码中使用$函数。同时，我又可能重新定义$函数完成想要的功能，JavaScript代码 app.js如下：

let appShell = function(useMyDollar){
    if(useMyDollar){
        let $ = function(domElement){
            let element = document.getElementsByTagName(domElement);
            if(element){
                return element;
            }else{
                throw "No such tag";
            }
        };
        
        var run = function(){
            let myDiv = $('div');
            console.log(myDiv[0].tagName);
        };
    }

    function initApp(){
        $('.container').css('height', "100%");
    }
    return {
        run : run,
        init : initApp,
    };
};
$(function(){
    let app = appShell(true);
    $('.container').css('width', "100%");
    app.init();
    app.run();
});

html代码index.html如下：

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="app.js"></script>   
    </head>
    <body>
        <div class="container">
            Hello ES6!
        </div>
    </body>
</html>

在文档ready时，通过appShell函数得到一个app对象，参数为true表示我要重写$函数。在appShell函数中，新的$函数使用let关键字定义在if块中，因此只在if块内有效。当init方法执行时，$函数仍然是jQuery提供的版本。当run方法执行时，由于run的定义在if块内部，因此新的$函数对其可见。如果使用var定义新的$函数，那么新的定义会提升到appShell函数的作用域范围，执行init函数就会报错，因为新的$函数并没有css函数的定义。同时注意到，新的$函数的定义并没有提升到appShell外部，因此外部的css函数调用没有问题。

除了let外，ES6中还引入了const关键字用于声明一个常量。常量声明以后其值不能改变。const常量的作用域规则与let变量相同。值得注意的是，如果将一个对象声明为常量，只是这个对象的指向不能改变，即不能赋值为另一个对象，而对象的内容是可以改变的。除非使用Object.freeze方法声明，常量的内容也不能改变。例如我在html文件里加入以下片段：

<div class="container">
            Hello ES6!
            <label id="cat-name" style="margin-left:10px"></label>
            <button id="change-name" style="margin-left:10px">Try to change cat's name</button>
</div>

label用于显示cat name，button用于更改cat name。对应的app.js的改动如下：

const myCat = Object.freeze({
    name : "July",
    age : 1
});

function initApp(){
        $('.container').css('height', "100%");
        $('#cat-name').text(myCat.name);
        $('#change-name').on('click', function(event){
           myCat.name = "Circle";
           //myCat = {name: "Who"}; //Uncaught TypeError: Assignment to constant variable.
           $('#cat-name').text(myCat.name); 
        });
    }

由于myCat对象使用了freeze方法声明，在click事件处理器中对myCat.name的赋值操作是无效的，该属性保持不变，而在严格模式下会报错。

参考资料: ECMAScript 入门第2章： http://es6.ruanyifeng.com/#docs/let

环境：Chrome 53

代码：在这里下载。