譯：用let 和 const 來指導JavaScript 的變量提升

sanyang 發布于2019-08-21 18:19 / 1416人閱讀

摘要：最近在上看到一篇關于變量提升的文章，原文在此。對于剛入門的開發者時常難以理解變量方法提升的獨特行為。接下來我們要談論，，聲明，那么先了解變量提升就顯得更為重要了。在進入作用域和不能訪問的這段時間，我們稱為暫時性死區。

最近在Medium上看到一篇關于“變量提升”的文章，原文在此：《A guide to JavaScript variable hoisting with let and const》。為了培養自己看英文文檔習慣且看懂的需要，就翻譯一下。談不上精確，歡迎指正。

對于剛入門的JavaScript開發者時常難以理解“變量/方法”提升（hoisting）的獨特行為。
接下來我們要談論var，let，const聲明，那么先了解變量提升就顯得更為重要了。那就開始吧。

什么是變量提升？

JavaScript引擎用“var”處理所有變量聲明，不管在哪里聲明，最后都會在函數作用域頂端（如果在函數內部聲明）或則在全局作用域頂端（在函數外部聲明）。這就是“提升”。
因此變量實際上可能在聲明它之前就已經被引擎獲得了。

在實際操作中看看效果..

// OUTPUT : undefined
console.log(shape);
var shape = square;
// OUTPUT : square
console.log(shape);

如果你來自C語言，你認為在第一個console.log那里就會拋出變量未定義的錯誤。但JavaScript解釋器預感和“提升”所有變量聲明到作用域頂端，并且在那進行初始化。
下面演示實際發生了什么：

//declaration getting hoisted at the top
var shape;
// OUTPUT : undefined
console.log(shape);
shape = square;
// OUTPUT : square
console.log(shape);

另一個例子是用函數作用域來更清楚的展示：

 function getShape(condition) {
    // shape exists here with a value of undefined
    // OUTPUT : undefined
    console.log(shape);
    if (condition) {
        var shape = square;
        // some other code
        return shape;
    } else {
        // shape exists here with a value of undefined
        return false;
    }
}

上面的例子可以看出shape聲明被提升到了“getShape”函數作用域的頂端。這是因為“if/else” 不能像其他語言那樣，創建局部作用域。在JavaScript里，函數作用域實際上就是局部作用域了。因此，“shape”可以在if塊之外，函數作用域內任意訪問，且值為“undefined”。

JavaScript的這個默認行為，既是優點，又是缺點。沒有完全掌握的話，會給我們的代碼帶來細微且危險的bugs。

進入塊級作用域！

ES6 引入了塊級作用域，這讓開發者對變量有了更多的控制，且讓變量有靈活的生命周期。
塊級聲明在塊級/詞法作用域里面聲明，他們在“{}”中被創建。

let聲明

“let”語法跟“var”相似，只是用“let”標識符來替換“var”標識符進行變量聲明，其作用域范圍僅僅在聲明的那個代碼塊。
let聲明放在塊的頂端，因此只能在那個塊級作用域中訪問。
舉例：

function getShape(condition) {
  // shape doesn"t exist here
  // console.log(shape); ReferenceError: shape is not defined
  if (condition) {
    let shape = square;
    // some other code
    return shape;
  } else {
    // shape doesn"t exist here as well
    return false;
  }
}

注意shape只存在if塊中，當在if塊外面訪問時會拋出一個錯誤，而不是象我們之前用var聲明那樣輸出“undefined”。
提示：在同一個作用域內，如果已經使用var標識符聲明了變量，同時又用let標識符聲明同名變量時會拋出錯誤。
但是，如果在let聲明的變量作用域外，聲明同名變量是不會報錯的。（這種情況也同樣適用于我們即將談論的const聲明。）
舉例：

var shape = square;

let shape = rectangle;
// SyntaxError: Identifier "shape" has already been declared

和

var shape = square;
if (condition) {
  // doesn"t throw an error
  let shape = rectangle;
  // more code 
}
// No error

const聲明

const聲明語法與let和var相似，生命周期與let相同，但你還要注意一些規則。
用const聲明的變量將像常量看待，因此它們的值在定義后是不可以修改的。由于這樣，每個const變量都必須在聲明的同時進行初始化。
舉例：

// valid 
const shape = triangle;
// syntax error: missing initialization
const color;
// TypeError: Assignment to constant variable
shape = square;

然而，這個規則在聲明對象時有點不同。對象屬性的值可以被修改！

 const shape = {
    name: triangle,
    sides: 3
}
// WORKS
shape.name = square;
shape.sides = 4;
// SyntaxError: Invalid shorthand property initializer
shape = {
    name: hexagon,
    sides: 6
}

在上面的例子中，我們可以看到shape對象屬性的值可以被修改，因為我們只改變shape包含的,而不是它本身。
我們可以總結說，const可以防止整個綁定的修改，而不是綁定的值。
提示：屬性可以改變。所以對于真正不可變的，請使用Immutable.js或Mori。

暫時性死區

我們都知道，如果我們在使用let，const聲明定義的變量之前就使用這些變量，會拋出ReferenceError錯誤。在進入作用域和不能訪問的這段時間，我們稱為暫時性死區。
提示：“暫時性死區”不是ECMAScript規范里的正式定義，它只是在程序員中廣為流行而已。

我個人推薦總是使用const，因為它不容易出錯。我還沒遇到需要使用var的情況。
作為基本規則，只在循環計數器中，或則你真的需要給變量從新賦值時用let。其他地方，用const。我已經放棄使用循環，轉而選擇使用filter,map,reduce等方法。你也應該如此。

后記，此作者還有一篇關于方法提升的文章，到時候在搬來。

云服務器 GPU云服務器 js變量聲明提升 javascript提升用jquery來定位 php和javascript的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90355.html

譯：函數提升與提升面試的相關問題

摘要：函數提升在里有兩種方式創建函數，通過函數聲明和函數表達式。函數聲明用指定的參數來定義函數。提示不要在中進行函數聲明。問題輸出兩個都是用函數聲明的函數，將被提升到的局部作用域頂端。函數本身將作為函數聲明在全局范圍內提升。作者關于提升的話題，總共有兩篇。（后來又有一個討論篇），再次搬過來。水平有限，如果翻譯的不準確請包涵，并去看原文。下面開始：這是我之前的關于提升的文章，標題為《用le...

wuaiqiu 2019-08-21 18:25 評論0 收藏0
[譯]了解Javascript中的執行上下文和執行堆棧

摘要：理解執行上下文和執行堆棧對于理解的其它概念如提升，范圍和閉包至關重要。正確地理解執行上下文和執行堆棧將幫助你更好地使用開發應用。引擎執行位于執行堆棧頂部的方法。當調用時，為該函數創建一個新的執行上下文，并且把它推入到當前執行堆棧。 By Sukhjinder Arora | Aug 28, 2018 原文如果你是或者你想要成為一名js開發者，那么你必須了解js程序內部的運作。理解執行...

qujian 2019-08-23 12:43 評論0 收藏0
ES6學習第一章 let 和 const 命令

摘要：外層作用域不報錯正常輸出塊級作用域與函數聲明規定，函數只能在頂層作用域和函數作用域之中聲明，不能在塊級作用域聲明。規定，塊級作用域之中，函數聲明語句的行為類似于，在塊級作用域之外不可引用。同時，函數聲明還會提升到所在的塊級作用域的頭部。前言：最近開始看阮一峰老師的《ECMAScript 6 入門》(以下簡稱原...

番茄西紅柿 2021-11-24 09:39 評論0 收藏2637
【譯】12個提高 JavaScript 技能的概念！

摘要：如果是你是高級或者初級開發人員，了解它的基本概念非常重要。由于是基本類型，因此的值等于的值，并且可以認為此時與完全不同。展開運算符可用于提取數組的各個元素。函數本身返回從數組中刪除的項。如果未指定結束位置，則返回數組的其余部分。譯者：前端小智原文：hackernoon.com/12-javascri… JavaScript 是一種復雜的語言。如果是你是高級或者初級 JavaScript...

Eidesen 2019-05-23 16:27 評論0 收藏0
【譯】如何在 JavaScript 中使用對象的方法

摘要：中的所有對象都來自父的構造函數。不同于數組的原型方法例如和只能被數組實例使用，對象方法直接來自構造函數，并使用對象實例作為參數。這稱為靜態方法。創建對象的鍵值對的嵌套數組。可用于確定對象是否已凍結，并返回布爾值。原文：How To Use Object Methods in JavaScript作者：Tania Rascia譯者：博軒介紹 JavaScript 中，對象是鍵/值 ...

longmon 2019-08-23 17:03 評論0 收藏0