的Javascript明確塊

Question

我最近了解到explicit block

{ 
    let foo = 'Hello'; 
    someFunction(foo); 
} 

我還不太清楚它做什麼，我們（開發商）怎麼才能從中受益。

• 你以前用過嗎？
• 你有使用案例嗎？

感謝您分享您的體驗！

Answer 1

由於let（和const和class和  —嚴格模式  —函數聲明）有塊範圍爲ES2015的，你可以使用一個單獨的塊的私人信息，只是一般的更精細地控制變量的作用域，我們曾經使用過IIFE。

也就是說，這裏的一些ES5和具有私有變量前面的代碼，x：

(function() { 
    var x = Math.random(); 
    console.log(x); 
})(); 
// `x` doesn't exist here 

x是很好包含做到這IIFE。現在

，與ES2015，我們可以做同樣的事情，而無需創建和調用函數：

{ 
    let x = Math.random(); 
    console.log(x); 
} 
// `x` doesn't exist here 

同樣，由於獨立塊讓我們控制變量的作用域，我們可以更明確地控制一個封閉的內容。例如，考慮一下：

function doSomething() { 
    let retainedInformation; 
    { 
     let something = /*...get some setup information...*/; 
     let anotherThing = /*...more setup information...*/; 
     let aThirdThing = /*...even more setup information...*/; 
     retainedInformation = /*...something figured out using the above...*/; 
    } 
    return function() { 
     // ...use `retainedInformation`... 
    }; 
} 

由於something，anotherThing, and aThirdThing are all out of scope for the function returned by DoSomething的, they aren't retained by it, just retainedInformation`是。

但是現在的JavaScript引擎已經做了關閉優化，無論如何，所有這些設置都可能是您從doSomething調用的函數中的最佳選擇，只是基於一般原則。

---

這就是說，我們仍然可能會看到很多IIFE，因爲它們可以返回一個值。因此，舉例來說，如果我想使用一個私有變量的函數，我可能會做的事：

const foo = function() { 
    let privateInfo = 42; 
    const foo =() => { 
     console.log(privateInfo++); 
    }; 
    return foo; 
}(); 
foo(); // 42 
foo(); // 43 

而不是

let foo; 
{ 
    let privateInfo = 42; 
    foo =() => { 
     console.log(privateInfo++); 
    }; 
} 
foo(); // 42 
foo(); // 43 

...雖然兩者的工作。