131 lines
6.5 KiB
Markdown
131 lines
6.5 KiB
Markdown
|
---
|
|||
|
title: Scopes
|
|||
|
localeTitle: 领域
|
|||
|
---
|
|||
|
如果你已经用JavaScript编程了一段时间,那么毫无疑问你会遇到一个称为`scope`的概念。什么是`scope` ?你为什么要花时间学习它?
|
|||
|
|
|||
|
在程序员说话中, `scope`是**当前执行的上下文** 。困惑?我们来看看以下代码:
|
|||
|
```
|
|||
|
var foo = 'Hi, I am foo!';
|
|||
|
|
|||
|
var baz = function () {
|
|||
|
var bar = 'Hi, I am bar too!';
|
|||
|
console.log(foo);
|
|||
|
}
|
|||
|
|
|||
|
baz(); // Hi, I am foo!
|
|||
|
console.log(bar); // ReferenceError...
|
|||
|
```
|
|||
|
|
|||
|
这是一个简单的例子,但它很好地说明了所谓的_词法范围_ 。 JavaScript和几乎所有其他编程语言都有一个_词法范围_ 。还有另一种称为_动态范围的范围_ ,但我们不会讨论它。
|
|||
|
|
|||
|
现在,术语_词汇范围_看起来很奇特,但正如你将看到它原则上非常简单。在词法范围中,有两种范围: _全局范围_和_局部范围_ 。
|
|||
|
|
|||
|
在程序中键入第一行代码之前,会为您创建一个_全局范围_ 。这包含您在程序中声明的**所有函数之外的所有变量** 。
|
|||
|
|
|||
|
在上面的示例中,变量`foo`位于程序的全局范围内,而变量`bar`在函数内声明,因此**位于该函数的本地范围内** 。
|
|||
|
|
|||
|
让我们逐行分解示例。虽然你可能会在这一点上感到困惑,但我保证你读完这篇文章时会有更好的理解。
|
|||
|
|
|||
|
在第1行,我们声明变量`foo` 。这里没什么太花哨的。让我们称之为`foo`的左手大小(LHS)引用,因为我们正在为`foo`分配一个值,它位于`equal`的左侧。
|
|||
|
|
|||
|
在第3行,我们声明一个函数并将其赋值给变量`baz` 。这是对`baz`另一个LHS参考。我们正在为它赋值(请记住,函数也是值!)。然后在第8行调用此函数。这是一个RHS,或者是对`baz`的右侧引用。我们正在检索`baz`的值,在这种情况下是一个函数然后调用它。如果我们将其值分配给另一个变量,例如`foo = baz` ,则另一个对`baz` RHS引用。这将是对`foo`的LHS参考和对`baz`的RHS参考。
|
|||
|
|
|||
|
LHS和RHS参考文献可能听起来令人困惑,但它们对于讨论范围很重要。可以这样想:LHS参考是为变量赋值,而RHS参考则是检索变量的值。它们只是一种更简单,更方便的方式来表示“检索价值”和“分配价值”。
|
|||
|
|
|||
|
现在让我们分析一下函数本身内部发生了什么。
|
|||
|
|
|||
|
当编译器在函数内编译代码时,它进入函数的**本地范围** 。
|
|||
|
|
|||
|
在第4行,声明变量`bar` 。这是一个LHS参考`bar` 。在下一行,我们在`console.log()`有一个对`foo`的RHS引用。请记住,我们正在检索`foo`的值,然后将其作为参数传递给方法`console.log()` 。
|
|||
|
|
|||
|
当我们有一个对`foo`的RHS引用时,编译器会查找变量`foo`的声明。编译器在函数本身或**函数的本地范围中**找不到它,因此它**上升到一个级别:到全局范围** 。
|
|||
|
|
|||
|
此时您可能认为范围与变量有关。那是对的。范围可以被视为变量的容器。在本地范围内创建的所有变量只能在该本地范围内访问。但是,所有本地范围都可以访问全局范围。 (我知道你现在可能更加困惑,但只要跟我说几句话)。
|
|||
|
|
|||
|
因此编译器进入全局范围以查找变量`foo`的LHS引用。它在第1行找到一个,所以它从LHS引用中检索值,这是一个字符串: `'Hi, I am foo!'` 。此字符串将发送到`console.log()`方法,并输出到控制台。
|
|||
|
|
|||
|
编译器已经完成了函数内部的代码执行,所以我们回到第9行。在第9行,我们有一个变量`bar`的RHS参考。
|
|||
|
|
|||
|
现在, `bar`在`baz`的本地范围内被声明,但是在全球范围内有一个RHS参考`bar` 。由于全局范围内没有`bar` LHS引用,因此编译器无法找到`bar`的值并抛出ReferenceError。
|
|||
|
|
|||
|
但是,您可能会问,如果函数可以在变量外部查看,或者本地范围可以查看全局范围以查找LHS引用,为什么全局范围不能窥探到本地范围?那就是词汇范围的工作原理!
|
|||
|
```
|
|||
|
... // global scope
|
|||
|
var baz = function() {
|
|||
|
... // baz's scope
|
|||
|
}
|
|||
|
... /// global scope
|
|||
|
```
|
|||
|
|
|||
|
这是与上面相同的代码,说明了范围。这形成了一种符合全球范围的层次结构:
|
|||
|
|
|||
|
`baz -> global` 。
|
|||
|
|
|||
|
因此,如果在`baz`范围内存在变量的RHS参考,则可以通过全局范围内该变量的LHS参考来实现。但**事实**恰恰相反。
|
|||
|
|
|||
|
如果我们在`baz`内部有另一个功能怎么办?
|
|||
|
```
|
|||
|
... // global scope
|
|||
|
var baz = function() {
|
|||
|
... // baz's scope
|
|||
|
|
|||
|
var bar = function() {
|
|||
|
... // bar's scope.
|
|||
|
}
|
|||
|
|
|||
|
}
|
|||
|
... /// global scope
|
|||
|
```
|
|||
|
|
|||
|
在这种情况下,层次结构或**范围链**将如下所示:
|
|||
|
|
|||
|
`bar -> baz -> global`
|
|||
|
|
|||
|
内部的任何RHS引用`bar`的本地范围可以通过在全球范围内或LHS引用被fullfilled `baz`适适用范围“,但在RHS参考`baz`的范围不能用在LHS参考fullfilled `bar`适适用范围”。
|
|||
|
|
|||
|
**您只能遍历范围链,而不是向上遍历。**
|
|||
|
|
|||
|
关于JavaScript范围,您还应该了解其他两个重要事项。
|
|||
|
|
|||
|
1. 范围由函数声明,而不是由块声明。
|
|||
|
2. 函数可以是前向引用的,变量不能。
|
|||
|
|
|||
|
观察(每个注释描述其写入的行的范围):
|
|||
|
|
|||
|
\`\`\` // outer()在此范围内,因为函数可以是前向引用的
|
|||
|
```
|
|||
|
function outer() {
|
|||
|
|
|||
|
// only inner() is in scope here
|
|||
|
// because only functions are forward-referenced
|
|||
|
|
|||
|
var a = 1;
|
|||
|
|
|||
|
//now 'a' and inner() are in scope
|
|||
|
|
|||
|
function inner() {
|
|||
|
var b = 2
|
|||
|
|
|||
|
if (a == 1) {
|
|||
|
var c = 3;
|
|||
|
}
|
|||
|
|
|||
|
// 'c' is still in scope because JavaScript doesn't care
|
|||
|
// about the end of the 'if' block, only function inner()
|
|||
|
}
|
|||
|
|
|||
|
// now b and c are out of scope
|
|||
|
// a and inner() are still in scope
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
// here, only outer() is in scope
|
|||
|
```
|
|||
|
|
|||
|
\`\`\`
|
|||
|
|
|||
|
# 参考
|
|||
|
|
|||
|
1. Kyle Simpson的[范围和闭包](https://github.com/getify/You-Dont-Know-JS/tree/master/scope%20%26%20closures) 。它详细介绍了作用域机制的工作原理,并对JavaScript编译器的工作原理进行了表面描述,因此如果您对此感兴趣,请务必阅读!它在GitHub上是免费的,可以从O'Reilly购买。
|
|||
|
2. John Resig和Bear Bibeault [的JavaScript Ninja](https://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/1617292850/ref=pd_lpo_sbs_14_img_0?_encoding=UTF8&psc=1&refRID=YMC2TB2C0DFHTQ3V62CA)的[秘密](https://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/1617292850/ref=pd_lpo_sbs_14_img_0?_encoding=UTF8&psc=1&refRID=YMC2TB2C0DFHTQ3V62CA) 。这是一个更深入理解JavaScript的好指南。
|