[js高手之路] es6系列教程 - var, let, const詳解

標籤：let   const   var   

function show( flag ){            console.log( a );            if( flag ){                var a = ‘ghostwu‘;                return a;            } else {                console.log( a );                return null;            }        }

我們從es5的變數提升開始說起， 由於變數提升的原因， 上述程式， 在第2行和第7行都能訪問到a的值， 只不過是undefined, 如果你不熟悉javascript這種變數的預解釋機制，可能會認為第2行和第7行會報錯， 只有flag為true的時候，變數a才聲明了, 其實javascript在詞法解釋的時候，會把上述代碼解釋成下面的樣子:

function show( flag ){            var a;            console.log( a );            if( flag ){                a = ‘ghostwu‘;                return a;            } else {                console.log( a );                return null;            }        }

這種機制，在項目中經常誤導程式員，哪怕是資深的前端程式員，不小心也容易入坑， 於是ES6引入了塊級範圍來強化對變數生命週期的控制.

什麼是塊級範圍?

1，函數內部

2，塊中( 通常指的是一對花括弧之間)

es6中使用新的關鍵詞 let 來定義變數， 為塊級範圍，上例，如果改成let聲明

function show( flag ){            console.log( a );            if( flag ){                let a = ‘ghostwu‘;                return a;            }else {                console.log( a );                return nul;            }        }

由於let是塊級範圍，不會像var一樣 產生變數提升， 所以，第2行和第7行 這個時候報錯（ a is not defined ）

只有在flag為true的情況，a會被定義， 而且存取範圍在第3行和第6行的大括弧之間， 超出這個範圍，就訪問不到a, 這就是塊級範圍

let都有哪些特性呢？

在同一個範圍下，let不能重複定義兩個同名的標識符

在不同的範圍下，可以使用同名的標識符

1 var a = ‘ghostwu‘;2 let a = ‘ghostwu2‘;

1 let a = ‘ghostwu‘;2 let a = ‘ghostwu2‘;

以上兩種方式，都會報重定義錯誤(Identifier ‘a‘ has already been declared)

let a = 10;        if( a ){            let a = 100;            console.log( a ); //100        }        console.log( a ); //10

以上這種方式，不會報錯，因為是兩個不同的範圍

let的經典應用

在4個按鈕中，擷取當前被點擊按鈕的索引

<script>        window.onload = function(){            var aInput = document.querySelectorAll("input");            for( var i = 0; i < aInput.length; i++ ){                aInput[i].onclick = function(){                    alert( i );                }            }        }    </script>   <input type="button" value="按鈕1">    <input type="button" value="按鈕2">    <input type="button" value="按鈕3">    <input type="button" value="按鈕4">

如果，我們用上面的方法做， 每個按鈕點擊之後 i 都是4, 因為4個按鈕綁定完事件之後，i的值就變成了4, 下次點擊按鈕的時候，所有的都是4, 因為 i = 4 是共用的

通常，我們會在每個按鈕上，加一個自訂索引 綁定 對應的 i 值，再藉助this關鍵字，就可以如願以償，如下:

window.onload = function(){            var aInput = document.querySelectorAll("input");            for( var i = 0; i < aInput.length; i++ ){                aInput[i].index = i;                aInput[i].onclick = function(){                    alert(this.index);                }            }        }

還有另一種方法，就是借用立即運算式+閉包的形式, 如下:

window.onload = function(){            var aInput = document.querySelectorAll("input");            for( var i = 0; i < aInput.length; i++ ){                aInput[i].onclick = (function( j ){                    return function(){                        alert( j );                    }                })( i );            }        }

而採用let關鍵字， 利用塊級範圍的特性，就可以輕鬆達到目的

window.onload = function(){            var aInput = document.querySelectorAll("input");            for( let i = 0; i < aInput.length; i++ ){                aInput[i].onclick = function(){                    alert( i );                };            }        }

var在全域範圍下，會把屬性綁定到window上，從而可能產生覆蓋屬性的隱患，而let關鍵字只是會遮蔽它，並不會覆蓋window上的同名屬性

            var a = 10;        console.log( a );  //10        console.log( window.a ); //10        console.log( ‘a‘ in window ); //true        let user = ‘ghostwu‘;        console.log( user ); //ghostwu        console.log( window.user ); //undefined        console.log( ‘b‘ in window  ); //false        /*        var RegExp = ‘ghostwu‘;        console.log( RegExp );  //ghostwu        console.log( window.RegExp ); //ghostwu        console.log( ‘RegExp‘ in window ); //true        */        let RegExp = ‘ghostwu‘;        console.log( RegExp );  //ghostwu        console.log( window.RegExp ); //function RegExp() { [native code] }        console.log( ‘RegExp‘ in window ); //true

const關鍵字是用來定義常量的，它有如下特性:

.塊級範圍

.聲明的時候，必須賦予初始值

.不能被重新賦值

.如果值是一個對象， 那麼對象裡面的屬性是允許被修改的

.不能跟其他標識符重名

1      const user = ‘ghostwu‘;2        console.log( user );3        user = ‘zhangsan‘; //報錯, 不能重新賦值

1 const user; //報錯，定義的時候 沒有給初始值

            const user = {            name  : ‘ghostwu‘        };        console.log( user.name ); //ghostwu        user.name = ‘zhangsan‘;  //對象的屬性允許被修改        console.log( user.name ); //zhangsan

            const user = {            name  : ‘ghostwu‘        };        user = {    //報錯，不能重新給user賦值            name : ‘zhangsan‘        }        console.log( user.name ); //報錯

var a = 10;2         

const a = 10; // 報錯，重定義錯誤

1         let a = 10;

2         const a = 10; //報錯，重定義錯誤

1        if ( true ) {

2             const a = 10;

3             console.log( a ); //10

4         }

5         console.log( a ); //報錯:a is not defined

本文出自 “ghostwu” 部落格，請務必保留此出處http://ghostwu.blog.51cto.com/11192807/1959057

[js高手之路] es6系列教程 - var, let, const詳解