提升在JavaScript中的工作原理是什么

這篇“提升在JavaScript中的工作原理是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“提升在JavaScript中的工作原理是什么”文章吧。

提升（Hoisting）是 JavaScript 的概念，它使 JavaScript 與 Java 語言不同。在 Java 中，代碼中創建的每個變量都具有塊級作用域。意味著如果我們創建了任何將其可見性限制在聲明它的塊中的變量。因此，如果我們在聲明中使用上面的變量，則會出錯。但是在 JavaScript 中，變量可以在聲明之前使用，這種機制稱為 Hoisted。這是 JavaScript 的默認行為。

提升是 JS 的默認行為，即在代碼執行之前定義作用域頂部的所有聲明。提升的好處之一是它使我們能夠在函數出現在代碼中之前調用它們。JavaScript 只提升聲明，而不是初始化。

理解 JavaScript 提升變量究竟是什么聲明和初始化按以下順序進行：

聲明 –> 初始化/賦值 –> 用法

// Variable lifecycle
let x;                 // Declaration
x = “hoisting”;        // Assignment
console.log(x);        // Usage

最重要的是，應該始終記住 JavaScript 首先在后臺聲明變量。然后，初始化它們。因此，了解變量聲明的處理發生在任何代碼執行之前也是很好的。但是，在執行分配它們的代碼之前，JavaScript 中不存在未聲明的變量。因此，在執行賦值時，分配給未聲明變量的值會隱式地將其創建為全局變量。這指定所有未聲明的變量都是全局變量。

// hoisting
function Hoisting(){
  x = 100;
  let y = 200;
}
Hoisting();
console.log(x); // 100
console.log(y); // Reference Error: y is not defined

在上面的代碼示例中，有一個名為 Hoisting() 的函數。因此，我們有一個沒有使用 let/var/const 聲明的變量和一個 let 變量 y。將未聲明的變量分配給全局作用域是由 JavaScript 完成的。但是對于變量 y，我們得到了一個引用錯誤（Refence Error）。

在函數作用域變量中托管

在 ES5 中，我們考慮 var 關鍵字。與 let/const 相比，使用 var 進行提升有些不同。使用 var 來查看提升如何工作的示例：

var num (global)
console.log(car);    // undefined
var car = ‘Lamborgini’;

在上面的代碼中，當記錄在使用它之后聲明和分配的變量名稱時，編譯器給出“undefined”的結果。這是意料之中的，因為我們應該在聲明它之前就嘗試使用 car 變量，因為我們應該得到 ReferenceError。但是解釋器對此有不同的看法，如下所示：

//how interpreter sees the above code
var car;
console.log(car); // undefined
car = ‘Lamborgini’;

let 和 const 關鍵字。

用 let 或 const 聲明的變量和常量不會被提升！

JavaScript 初始化不是初始化。

JavaScript 只能提升聲明，而不能用來初始化。

var a = “volkswagon”; // Initialize a
var b = “Lamborgini”; // Initialize b
elem = document.getElementById("car"); // Find an element
elem.innerHTML = a + " " + b;       // Display a and b as volkswagon and lamborgini

在上面的代碼中，因為變量的聲明發生在結果之前。所以結果，代碼的執行打印了變量 a 和 b 的結果。

var a = “i10”;  // Initialize a
elem = document.getElementById("car");      // Find an element
elem.innerHTML = "a is " + a + “ and b is " + b;  // Display a and b
var b = “Lamborgini”;  // Initialize b

結果：

a 是 i10 而 b 是未定義的。

因此，這是因為只發生了聲明（var b）的提升，而不是初始化（=“Lamborgini”）到頂部。由于提升，b 在使用之前已經聲明，但是因為初始化沒有提升，所以 b 的值是未定義的。

提升類（Hoisting Classes）

JavaScript 類可以分為兩類：

• 類聲明

• 類表達式

在類聲明中，它們很像函數對應物。因此，這意味著不會提升 JavaScript 類聲明。但是，它們在評估之前保持未初始化狀態。因此，這實際上意味著必須先聲明一個類，然后才能使用它。

var car1 = new car();
car1.height = 5;
car1.weight = 500;
console.log(car1);   // Output: ReferenceError: car is not defined
class car{
  constructor(height, weight) {
    this.height = height;
    this.weight = weight;
  }
}

在上面的代碼中，出現了引用錯誤。這是因為在 car1 變量初始化之后，汽車類的定義就發生了。為了解決這個錯誤，我們只需要在 car1 初始化之前定義 car 類。這是在類聲明中托管。

class car{
  constructor(height, weight) {
    this.height = height;
    this.weight = weight;
  }
}
var car1 = new car();
car1.height = 5;
car1.weight = 500;
console.log(car1);

因此，這給出了正確的結果。在 Class 表達式中它們很像它們的函數對應物。因此，這意味著沒有提升類表達。因此，下面是類表達式的未命名或匿名變體的示例：

var rect = new shapes();
rect.height = 10;
rect.width = 20;
console.log(rect); // Output: TypeError: shapes is not a constructor
var shapes = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
Thus, the correct way to do it is like this:
var shapes = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
var rect = new shapes();
rect.height = 10;
rect.width = 20;
console.log(rect);

以上就是關于“提升在JavaScript中的工作原理是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。