用JavaScript吊装

by Kirill Chaim Shcherbina

由Kirill Chaim Shcherbina

What is it?

它是什么？

The JavaScript engine stores function and variable declarations in memory during the compilation phase. So by the time the execution phase comes around they are in memory already.

JavaScript引擎在编译阶段将函数和变量声明存储在内存中。 因此，到执行阶段结束时，它们已经在内存中了。

In other words, when Javascript compiles all of your code, all variable declarations using var are hoisted/lifted to the top of their functional/local scope (if declared inside a function) or to the top of their global scope (if declared outside of a function) regardless of where the actual declaration has been made. This is what we mean by “hoisting”.

换句话说，当Javascript编译所有代码时，所有使用var的变量声明都将被提升/提升到其功能/局部范围的顶部(如果在函数内部声明)或它们的全局范围的顶部(如果在外部声明)函数)，而不管实际在哪里声明。 这就是我们所谓的“吊装”。

Example:

例：

function myFunc () {
  console.log(hello);
  var hello = 'World!';
}
// => undefined

The above code returned undefined because this is actually how it was read:

上面的代码返回undefined，因为实际上是这样读取的：

function myFunc () {
  var hello;
  console.log(hello);
  hello = 'World!';
}

Due to hoisting, var hello was, so to say placed at the top. While the assignment to “World” was left below where the console.log() does not see it.

由于吊装，var hello被放置在顶部。 虽然“世界”的分配留在console.log()看不到的地方。

What gets hoisted?

悬挂什么？

We touched upon variable hoisting above.We saw that hoisting applies to variables declared with var. However, variables and constants declared with let or const are not hoisted. (To note: . Variables declared with const and let do technically get ‘hoisted’, but the JavaScript engine doesn’t allow them to be referenced before they’ve been initialized, so we just say that they “aren’t hoisted”.)

我们在上面提到了变量提升，我们看到提升适用于用var声明的变量。 但是，不会提升使用let或const声明的变量和常量。 (请注意：。用const和let声明的变量在技术上得到“提升”，但是JavaScript引擎不允许在初始化之前引用它们，因此我们只说它们“未被提升”。 )

So taking the above example and replacing var with let:

因此，以上述示例为例，用let替换var：

function myFunc () {
  console.log(hello);
  let hello = 'World!';
}myFunc()

gives us:

给我们：

//=> Uncaught ReferenceError: Cannot access 'hello' before initialization at myFunc.

This is because there is no hoisting by let. So not only did we not get undefined, we got an error. If there were to be hoisting involved, at least we would have a “hello” be declared before console.log(). Now however, there is no existence of any “hello” before the console.log(). The only way to fix it would be to do:

这是因为没有通过出租来吊装。 因此，我们不仅没有得到未定义的信息，而且还出现了错误。 如果要进行吊装，至少在console.log()之前声明一个“ hello”。 但是，现在在console.log()之前不存在任何“ hello”。 解决此问题的唯一方法是：

function myFunc () {
let hello = 'World!';
  console.log(hello);
}
myFunc()//=>World!

Functions declarations are hoisted, but these go to the very top, so will sit above all of the variable declarations. However, functions that are assigned to variables or function expressions are not hoisted.

函数声明被悬挂，但是它们到达最顶层，因此将位于所有变量声明之上。 但是，不会挂起分配给变量或函数表达式的函数。

This works:

这有效：

foo();function foo() {
  alert("Hello!");
}

This doesn’t:

这不是：

foo();var foo = function() {
  alert("Hello!");
};

Thank you for reading. Hope you enjoyed and gained clarity in hoisting.

感谢您的阅读。 希望您喜欢并在吊装过程中获得清晰感。

翻译自: https://medium.com/@rabbichaim770/hoisting-in-javascript-660573551179