1. 程式人生 > 實用技巧 >ES6學習筆記(1)- 塊級作用域

ES6學習筆記(1)- 塊級作用域

1. var宣告變數和變數提升(Hoisting)機制的問題

在JS中通過var關鍵字宣告的變數,無論在函式作用域中亦或是全域性作用域中,都會被當成當前作用域頂部的變數,和就是所謂的提升機制(Hoisting)。但是提升機制會帶來一個問題就是,預編譯階段JS引擎會將變數提升至作用域頂部,但是初始化操作是在某個作用域中,進而導致了引用了該變數的其他作用域並沒有被初始化,也就導致在瀏覽器看到undefined的結果。具體可看如下虛擬碼:

function printValue(condition) {
    if (condition) {
        var count = 10;
        console.log(
'if ' + count); } else { // 此處如果訪問count,則會在控制檯列印undefined console.log('else ' + count); } // 此處如果訪問count,會在控制檯列印10 console.log('Out side of Scope ' + count); } printValue(true); printValue(false);
function printValue(condition) {
    var count = 10;
    if (condition) {
        console.log(
'if ' + count); } else { // 此處如果訪問count,則會在控制檯列印undefined console.log('else ' + count); } // 此處如果訪問count,會在控制檯列印10 console.log('Out side of Scope ' + count); } printValue(true); printValue(false);

塊級作用域的引入解決了上述問題,塊級作用域存在於:

  • 函式內部;
  • { statements }之中;

那麼如何宣告塊級作用域呢?ES6語法中引入了let宣告,用法和var一致,但是可以把變數的作用域限制在當前的程式碼塊中,也就順帶解決了Hoisting所帶來的問題。

2. const宣告

const宣告的是常量,因此const宣告常量的時候必須進行初始化。這裡需要注意的是ES6語法中,如果使用const宣告的是普通變數,那麼是不可再被賦值修改的;但是如果定義的常量是物件,那麼物件中的屬性的值是可以修改的。

const company = {
   companyName: 'ABC Ltd',
   legalPerson: 'Nicholas'  
};

// 可以修改物件屬性的值
company.companyName = 'XYZ Ltd';

// 下面則會丟擲語法錯誤,這裡需要注意的一個區別是直接給物件的屬性重新賦值是改變了繫結,就會丟擲錯誤
company = {
   companyName: 'XYZ Ltd',
   legalPerson: 'Nicholas'  
}