javascript知识点_JavaScript基础知识系列：了解吊装

javascript知识点

One of the most important and fundamental concepts in JavaScript is the concept of hoisting. Hoisting not only gives us insight into how the JavaScript operates but also how its engine interprets and executes code. Let’s dive into it!

在JavaScript中最重要，最根本的概念ØNE是提升的概念。 吊装不仅使我们了解了JavaScript的运行方式，而且还了解了其引擎如何解释和执行代码。 让我们开始吧！

Hoisting is a mechanism that allows using a variable before declaring it!

提升是一种允许在声明变量之前使用变量的机制！

Hoisting is the process by which variables and functions are moved to the top of their respective global or local scope, before being executed. This mechanism allows them to be declared anywhere within their scope and still be executed sequentially. Simply put, hoisting means that variables and functions can be used before they are declared in your code.

提升是在执行之前将变量和函数移至其各自全局或局部范围顶部的过程。 这种机制使它们可以在其作用域内的任何位置声明，并且仍然可以顺序执行。 简而言之，提升意味着变量和函数可以在代码中声明之前使用 。

吊装变量 (Hoisting Variables)

hoistMe = 4; // <-- Assigned here although declared belowvar sRoot = Math.sqrt(hoistMe)console.log(sRoot)var hoistMe; // <-- Declared after hoistMe is used

Result: 2

结果： 2

As you can see above, the variable hoistMe is assigned and even used before being declared, which is very different from the order of variable declaration found in most languages. This is possible because the JS engine hoisted the variable, i.e. interpreted it, by raising it to the top scope prior to it being used in the code.

从上面可以看到，变量hoistMe在声明之前就被分配甚至使用了，这与大多数语言中发现的变量声明的顺序有很大不同。 这是可能的，因为JS引擎通过在代码中使用变量之前将其提升到顶级范围来提升变量(即解释变量)。

A ReferenceError occurs when you try to access an undeclared variable.

一个 ReferenceError 当您试图访问一个未声明的变量发生。

There are exceptions to this, however: let and const . ES6 introduced those two reserved words to abrogated the use of var. It’s important to note that hoisting doesn’t work with those two keywords. If we were to try the same code above with them instead, we would get the following error:

但是，有一些例外： let和const 。 ES6引入了这两个保留字，以废除var的使用。 请务必注意，吊装不适用于这两个关键字。 如果我们尝试对它们使用上面相同的代码，则会收到以下错误：

With let :

随着let ：

ReferenceError: Cannot access 'hoistMe' before initialization

With const :

用const ：

const hoistMe; // <-- Declared after hoistMe is used

A ReferenceError occurs when you try to access an undeclared variable. Hence, the following throws a ReferenceError :

当您尝试访问未声明的变量时，将发生ReferenceError 。 因此，以下引发ReferenceError ：

v = 4let v;

ReferenceError: Cannot access ‘v’ before initialization

ReferenceError: Cannot access 'v' before initialization

JavaScript only hoists declarations not initialization!

JavaScript仅提升声明而不初始化！

Another point to make is that hoisting only applies to declarations, not initializations. For example:

需要说明的另一点是，吊装仅适用于声明，而不适用于初始化。 例如：

var hoistMe = 2; //Initializationconsole.log (hoistMe * hoistMe2);var hoistMe2 = 2;  //Doesn't get hoisted because of initialization

Result: NaN

结果： NaN

The output is NaN because hoistMe2 is undefined due to performing an operation (multiplication, division, etc) between a number (2) and an undefined variable. Why is it undefined? Any undeclared variable in JavaScript is by default assigned the type of undefined. Given that hoistMe2 was not hoisted due to initialization, when you log it out to the console it has no value because it has yet to be declared. It is only when the interpreter reaches the last line that it reads the declaration and assignment, i.e. initialization, statement.

输出为NaN因为hoistMe2 未定义由于一个数字(2)和未定义的变量之间执行的操作(乘法，除法等)。 为什么未定义？ 默认情况下，JavaScript中所有未声明的变量都被分配为 undefined 类型 。 鉴于没有初始化初始化hoistMe2，因此将其注销到控制台时，它没有任何价值，因为尚未声明。 只有在解释器到达最后一行时，它才读取声明和赋值，即初始化语句。

Hoisting Functions

吊装功能

Functions are similarly hoisted in JavaScript. They can be defined before they are called within the same scope.

在JavaScript中类似地悬挂了函数。 在相同范围内调用它们之前，可以先定义它们。

let str = "This string"console.log(hoistMe())function hoistMe(){ // <-- Defined AFTER being calledreturn str + " will be hoisted!"}

Result: This string will be hoisted!

结果： This string will be hoisted!

Due to hoisting, although the function is called before being defined, the JavaScript engine doesn’t throw an error because the function was already interpreted and lifted (hoisted) to the top scope and available for use prior to execution.

由于提升，尽管在定义函数之前就调用了该函数，但是JavaScript引擎不会引发错误，因为该函数已经被解释并提升(提升)到了顶级范围，并且可以在执行之前使用。

Takeaway

带走

We can summarize the above as follows:

我们可以总结如下：

• Hoisting is to use a variable or function before declaring or defining it.
  提升是在声明或定义变量或函数之前使用它。
• Hoisting only applies to declarations, not initialization.
  吊装仅适用于声明，不适用于初始化。

• Let and const cannot be hoisted (ES6+).

  Let和const无法提升(ES6 +)。

• A reference error occurs when using let, as seen above.

  如上所示，使用let时发生参考错误。

• A reference error happens when accessing undeclared variables.

  访问未声明的变量时发生参考错误。

• An undeclared variable is given the type of undefined by default in JavaScript.

  在JavaScript中，默认情况下，未声明的变量的类型为undefined 。

Although JavaScript allows variable hoisting, it is considered best practice to use let and const instead of var to avoid errors, and to make it a habit of declaring variables before using them. The same etiquette applies to functions as well.

尽管JavaScript允许变量提升，但最好的方法是使用let和const而不是var以避免错误，并使它成为在使用变量之前声明变量的习惯。 同样的礼节也适用于职能。

Happy coding! :)

编码愉快！ :)

翻译自: https://levelup.gitconnected.com/javascript-basics-understanding-hoisting-caa43ab2d27b

javascript知识点