let/const及块级做用域

时间 2020-07-25

标签 let const 繁體版

原文原文链接

<div id="cnblogs_post_body" class="blogpost-body">本系列是在平时阅读、学习、实际项目中有关于es6中的新特性、用发的简单总结，目的是记录以备往后温习；本系列预计包含let/const、箭头函数、解构、经常使用新增方法、Symbol、Set&Map、Proxy、reflect、Class、Module、Iterator、Promise、Generator、async/await let/const为咱们带来了什么？ let <ol> <li>约束变量提高 <div class="cnblogs_code"> <pre>(function foo() { console.log(a); let a = 1; })();javascript

// Uncaught ReferenceError: a is not defined</pre>html

</div> 总结下来就是一句：在变量使用以前，必须先要声明，变量声明永远在使用以前。 </li> <li>带来了块级做用域 <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre>// es5 (function(){ if(false) { var temp = 1; } console.log(temp); // undefined })();java

</span><span style="color: #008000;">//</span><span style="color: #008000;"> es6</span>
(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    </span><span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">false</span><span style="color: #000000;">) {
        let temp </span>= 1<span style="color: #000000;">;
    }
    console.log(temp); </span><span style="color: #008000;">//</span><span style="color: #008000;"> Uncaught ReferenceError: temp is not defined</span>
})();</pre>

<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 从代码中咱们能够很清晰看到es6的let的块级做用域，那么块级做用域有什么应用呢？举个例子： <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre>var fnArr = []; for(var i = 0; i < 5; i++) { fnArr.push(function() { console.log(i); }); } fnArr[0](); // 5 fnArr[1](); // 5 fnArr[2](); // 5 fnArr[3](); // 5 fnArr[4](); // 5 console.log(i); // 5</pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 若是没有仔细分析，执行的结果是否是有些出乎意料呢？是的，咱们本意在for循环内部使用的变量i被泄露成了全局变量，并且在for循环的每一次循环，变量i并无被从新声明，实际上数组fnArr中保存的每个函数中引用的都是同一个变量i，因此才致使了如今的结果，那怎么让代码按照咱们最初的想法运行呢？来看es5中经常使用的解法 <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre>var fnArr1 = []; for(var i = 0; i < 5; i++) { (function(j) { fnArr1.push(function() { console.log(j); }); })(i) } fnArr1[0](); // 0 fnArr1[1](); // 1 fnArr1[2](); // 2 fnArr1[3](); // 3 fnArr1[4](); // 4 console.log(i); // 5</pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 看起来是解决了，这里实际上用到了闭包的方法，fnArr1中每一项函数引用的j都是当前循环时i的一个副本，这样就解决了前面的问题，可是还有一个问题：变量i仍然隐式得泄露到了全局 <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre>var fnArr1 = []; for(let i = 0; i < 5; i++) { fnArr1.push(function() { console.log(i); }); } fnArr1[0](); // 0 fnArr1[1](); // 1 fnArr1[2](); // 2 fnArr1[3](); // 3 fnArr1[4](); // 4 console.log(i); // Uncaught ReferenceError: i is not defined</pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> OK，问题解决了，仅仅是将’var‘替换成了let，这就是let带来的便利。 </li> <li>产生暂时性死区&禁止重复声明 <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre>// 什么是禁止重复声明呢？先不给书面解释，来看一个es5中常常的写法 (function() { var temp = 1; var temp = 2; var temp = function() { return 1; }; })();</pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 上面这段代码执行没有任何问题，最终temp被赋值为一个函数 <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre>(function() { let temp = 1; var temp = 2; // Uncaught SyntaxError: Identifier 'temp' has already been declared var temp = function() { return 1; }; })();</pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 在第三行时就抛出了一个错误：temp已经被声明，是的，let声明过的变量，是不容许再次被声明的，再给几个例子巩固一下： <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre>(function() { var temp = 2; var temp = function() { return 1; }; let temp = 1; // Uncaught SyntaxError: Identifier 'temp' has already been declared })();es6

(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
    </span><span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">true</span><span style="color: #000000;">) {
        let temp </span>= 1<span style="color: #000000;">;
        </span><span style="color: #0000ff;">var</span> temp = 2; <span style="color: #008000;">//</span><span style="color: #008000;"> Uncaught SyntaxError: Identifier 'temp' has already been declared</span>

} })();数组

(function() { if(true) { let temp = 1; function temp() { // Uncaught SyntaxError: Identifier 'temp' has already been declared return 1; } } })();</pre>闭包

window.foo; // undefined</pre>函数

</div> 一切尽在不言中。。。 </li> </ol> const <ol> <li>let所拥有的特性，const都有，同时const还有一条：const声明的变量必须进行初始化，而且不能再被从新赋值 <div class="cnblogs_code"> <pre>const temp = 1; temp = 2; // Uncaught TypeError: Assignment to constant variable.</pre> </div> 注意是不能被从新赋值，这样是比较准确的，其实const声明的变量是能够被修改的，当const声明的变量被初始化为复杂数据类型时，const声明的变量就是可变的，至于为何，本身理解喽（变量标识符中保存的只是复杂数据类型内存地址而已。。。） <div class="cnblogs_code"> <pre>const temp = {}; temp.foo = 'aa'; // 这里没问题 temp = {foo: 'aa'}; // 这里就会抛出异常</pre> </div>   </li> </ol> for循环中的变量声明 前面在记录let块级做用域的时候，咱们使用了一个for循环的例子，这里咱们不妨试着解析一下for循环的执行过程 <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre>var fnArr = []; for(var i = 0; i < 3; i++) { fnArr.push(function() { console.log(i); }); }post

</span><span style="color: #008000;">//</span><span style="color: #008000;"> 伪代码</span>
<span style="color: #0000ff;">var</span><span style="color: #000000;"> fnArr;
fnArr </span>=<span style="color: #000000;"> [];
{
    </span><span style="color: #0000ff;">var</span><span style="color: #000000;"> i;
    i </span>= 0<span style="color: #000000;">;

    </span><span style="color: #0000ff;">if</span>(i &lt; 3<span style="color: #000000;">) {
        fnArr.push(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
            console.log(i);
        })
    }
    i</span>++<span style="color: #000000;">;
    </span><span style="color: #0000ff;">if</span>(i &lt; 3<span style="color: #000000;">) {
        fnArr.push(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
            console.log(i);
        });
    }
    i</span>++<span style="color: #000000;">;
    ...
}</span></pre>

</span><span style="color: #008000;">//</span><span style="color: #008000;"> 伪代码</span>
<span style="color: #0000ff;">var</span><span style="color: #000000;"> fnArr;
fnArr </span>=<span style="color: #000000;"> [];
{
    let i;
    i </span>= 0<span style="color: #000000;">;

    </span><span style="color: #0000ff;">if</span>(i &lt; 3<span style="color: #000000;">) {
        let i </span>=<span style="color: #000000;"> i;
        fnArr.push(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
            console.log(i);
        })
    }
    i</span>++<span style="color: #000000;">;
    </span><span style="color: #0000ff;">if</span>(i &lt; 3<span style="color: #000000;">) {
        let i </span>=<span style="color: #000000;"> i;
        fnArr.push(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
            console.log(i);
        });
    }
    i</span>++<span style="color: #000000;">;
    ...
}</span></pre>

<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 是否是看出点名堂？其实咱们彻底能够这样理解，在每一次循环中都从新声明了i，而且被赋值为外层i的当前值。(注意啊，这里只是伪代码，便于理解，实际中let i = i是会抛出异常的)</div>

转载来源：https://www.cnblogs.com/innooo/p/10438947.html