JavaScript范围

Scoping is the set of rules that’s defined in a programming language to determine the value of a variable.

作用域是用编程语言定义的一组规则，用于确定变量的值。

JavaScript uses lexical scoping, which means that the value of a variable is defined by its position when it’s written. Not when it’s called, which is something that happens with the alternative, dynamic scoping.

JavaScript使用词法作用域 ，这意味着变量的值由写入时的位置定义。 不是在调用它时发生的，而是在动态范围作用域中发生的 。

Scope is the set of variables that’s visible to a part of the program.

范围是程序的一部分可见的一组变量。

We have a global scope, block scope and function scope. If a variable is defined outside of a function or block, it’s attached to the global object and it has a global scope, which mean it’s available in every part of a program.

我们有一个全局范围，块范围和功能范围。 如果在函数或块之外定义了变量，则该变量将附加到全局对象，并且具有全局范围，这意味着该变量可在程序的每个部分中使用。

There is a very important difference between var, let and const declarations.

var ， let和const声明之间有一个非常重要的区别。

A variable defined as var inside a function is only visible inside that function. Just like function parameters.

在函数内部定义为var的变量仅在该函数内部可见。 就像函数参数一样。

A variable defined as const or let on the other hand is only visible inside that block where it resides.

另一方面，定义为const或let变量仅在其所在的那个块内可见。

It’s important to understand that a block (identified by a pair of curly braces) does not define a new scope for var, but it does for let and const. A new scope for var is only created when a function is created, because var does not have block scope, but function scope.

重要的是要理解，一个块(由一对花括号标识)不会为var定义新的作用域，但它会为let和const 。 仅在创建函数时创建var的新作用域，因为var没有块作用域，而是函数作用域。

Inside a function, any var variable defined in it is visible throughout all the function code, even if the variable is declared at the end of the function it can still be referenced in the beginning, because JavaScript before executing the code actually moves all variable declarations on top (something that is called hoisting). To avoid confusion, always declare var variables at the beginning of a function.

在函数内部，在其中定义的任何var变量在整个函数代码中都是可见的，即使在函数的末尾声明了该变量，仍然可以在开始时对其进行引用，因为执行代码之前JavaScript实际上会移动所有变量声明在顶部 (称为吊装 )。 为避免混淆，请始终在函数开头声明var变量。

This is what I mean. Even if you declare a var variable at the end of a function, its declaration is moved to the top:

这就是我的意思。 即使您在函数末尾声明var变量，其声明也会移到顶部：

function run() {
  console.log(`${name}`)
  var name = 'Flavio'
}

run()

This prints “undefined”, because what actually happens is:

这将显示“ undefined”，因为实际发生的是：

function run() {
  var name;
  console.log(`${name}`)
  name = 'Flavio'
}

run()

let and const do not “suffer” from hoisting. If you use one of them in the above example, you’d get an error: ReferenceError: name is not defined.

let和const不会“受折磨”。 如果在上面的示例中使用其中之一，则会出现错误： ReferenceError: name is not defined 。

In JavaScript, variables of a parent function are made available to inner functions as well. The scope of an inner function also includes the scope of a parent function, and this is called closure (we’ll talk more extensively about this later).

在JavaScript中，父函数的变量也可用于内部函数。 内部函数的范围也包括父函数的范围，这称为闭包(稍后我们将对此进行更广泛的讨论)。

There is one little thing you need to be aware of. In non-strict mode, if you use a variable without declaring it, wherever you do that, that variable is going to be attached to the global scope. Which can be a bad source of bugs. So, make sure you always declare variables before using them. Just be aware of this, but it’s just another reason to use strict mode by default, which solves this issue. We’ll talk about strict mode later.

您需要注意一件事。 在非严格模式下，如果在未声明的情况下使用变量，则无论在何处执行该变量，该变量都将附加到全局范围。 这可能是错误的错误来源。 因此，请确保在使用变量之前始终声明它们。 请注意这一点，但这是默认情况下使用严格模式的另一个原因，它可以解决此问题。 稍后我们将讨论严格模式。

Remember: any variable defined in a function (or block) with the same name as a global variable takes precedence over the global variable, shadowing it.

请记住：在函数(或块)中定义的与全局变量同名的任何变量都优先于全局变量，并对其进行阴影处理。

This prints undefined:

这打印undefined ：

var name = 'Roger'

function run() {
  console.log(`${name}`)
  var name = 'Flavio'
}

run()

and this raises an error ReferenceError: name is not defined:

这会引发错误ReferenceError: name is not defined ：

let name = 'Roger'

function run() {
  console.log(`${name}`)
  let name = 'Flavio'
}

run()

翻译自: https://flaviocopes.com/javascript-scope/