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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。