JavaScript中的变量提升 [英] Variable hoisting in javascript
问题描述
我正在阅读可变吊装上的某些内容，我无法确切了解如何学习它.我阅读了W3C学校的解释.但是，根据示例代码，我无法进行吊装.
I am reading something on Variable Hoisting that I am not able understand exactly how to learn around it. I read W3C schools for the explanation. But, based on the sample code, I could not make what is hoisting.
代码1 [这是来自w3c学校的代码]
code 1 [This is the code from w3c school]
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 5; // Initialize x
var y; // Declare y
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
y = 7; // Assign 7 to y
</script>
</body>
</html>
但是上面的代码仍然显示变量 y 的'undefined'.
But the above code still displays 'undefined' for the variable y.
如果我按以下方式更改代码，则可以正常工作.但是，下面的这段代码很常见，而不是理解'起重'
If I change the code as follows then it works fine. But, this below code is usual and not the different one to understand 'hoisting'
<script>
var x = 5; // Initialize x
var y;
y = 7;
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
</script>
对此有任何帮助来了解可变吊装"吗?
Any help on this to understand 'Variable hoisting'?
推荐答案
(注意:我已在末尾添加了对ES2015的 let 和 const 的简短讨论.这个答案.)
(Note: I've added a brief discussion of ES2015's let and const at the end of this answer.)
从根本上讲，变量提升的含义是，无论在任何给定范围内在什么地方看到 var ，它都是好像在范围的最开始.所以这些都是完全相同:
Fundamentally, what variable hoisting means is that no matter where you see var in any given scope, it's as though it were at the very beginning of the scope. So these are all identical:
function foo() {
var a = 42;
}
function foo() {
var a;
a = 42;
}
function foo() {
a = 42;
var a;
}
function foo() {
var a;
a = 42;
var a;
}
JavaScript引擎对它们的处理方式如下:
They're processed by the JavaScript engine as though they were:
function foo() {
var a;
a = 42;
}
这是一个实际使用变量提升的示例，并且还给出了一个我称之为 内隐全球性的恐怖 (这是我贫乏的小博客上的帖子):
Here's an example actually using variable hoisting, and also giving an example of what I call The Horror of Implicit Globals (that's a post on my anemic little blog):
function foo() {
a = 42;
b = 67;
console.log(a); // 42
console.log(b); // 67
var a;
}
foo();
console.log(typeof a); // undefined
console.log(typeof b); // number?!
console.log(b); // 67?!为什么 b 在 foo 之外存在?因为在 foo 内部，这两行非常具有不同的作用:
Why does b exist outside of foo? Because inside foo, these two lines do very different things:
a = 42;
b = 67;
第一行设置 local 变量 a ，因为我们已经声明了它.是的，我们声明了以后，但是我们声明了它.
The first line sets the local variable a, because we declared it. Yes, we declared it later, but we declared it.
第二行创建一个隐式全局变量 b ，因为我们从未在 foo 中的任何地方声明 b .
The second line creates an implicit global variable b, because we never declared b anywhere in foo.
更多(在我的博客上):
ES2015(又名"ES6")引入了 let 和 const .它们的处理方式与 var :
ES2015 (aka "ES6") introduced let and const. They're handled slightly differently from var:
- 它们具有块作用域，而不是功能或全局作用域.
- 声明被提升到块的顶部，但是此时它们没有任何默认值.仅在逐步执行代码时达到声明时，它们才会初始化(使用
undefined或您提供的值).
- They have block scope rather than function or global scope.
- The declaration is hoisted to the top of the block, but they don't get any default value at that point; they get initialized (with
undefinedor the value you provide) only when the declaration is reached in the step-by-step execution of the code.
演示点1(块作用域):
Demonstrating point #1 (block scope):
function foo() {
{
let a = 1;
console.log(a); // 1
}
console.log(a); // ReferenceError: a is not defined
}
foo();
演示点2:这将与 var 一起使用，而不会与 let 一起使用:
Demonstrating point #2: This would work with var, it doesn't work with let:
function foo() {
a = 42; // ReferenceError: a is not defined
let a;
}
foo();
从保留标识符(声明)到可以使用标识符(初始化)之间的时间称为临时死区，您不能在其中使用变量.
The time between when the identifier is reserved (declaration) and when you can use it (initialization) is called the Temporal Dead Zone within which you can't use the variable.
这篇关于JavaScript中的变量提升的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
