Question

我正在阅读有关JavaScript 范围和提升的内容。我看到下面的一个样本让我有些疑惑。所以，我想知道它是如何运作的。

var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
}
b();
alert(a);

代码会提醒 1 ！但是，如果我们删除＆＃34;函数a（）{}＆＃34; 部分，代码将提醒10。

那么，它是如何运作的！什么＆＃34;功能a（）{}＆＃34;在这里做，以及它如何影响范围。

我也无法理解此代码中空＆＃34; return;＆＃34; 的含义。

那么，这段代码如何依赖JavaScript范围？

Answer 1

首先，“空”return;语句只是在该点退出函数，返回undefined。它相当于return undefined;。

如果消除function a(){}部分，那么简单的情况就是b()函数将全局变量a更改为10，因此当您提醒时运行a函数后b()的值为10。没有该内部函数，对a的所有引用都表示全局变量。

但 function a(){}部分，该函数在 b()内声明为。它位于b()的本地。那么你有两个不同的a：全局变量，b()中的本地变量。无论在包含函数中的哪个位置出现另一个函数语句，JS编译器都将其视为处于函数顶部。因此，即使function a(){}行位于包含b()函数的末尾，但代码运行时会发生以下情况：

var a = 1; // declare a global variable a function b() { function a() {} // declare a local function a a = 10; // update local a to be 10 instead of a function return; } b(); alert(a); // show value of global a, which is still 1

Answer 2

除了nnnnnn's great answer之外，我还试图想象一下情况。

使用function a(){}，您的代码行为如下：

scope: window                         scope: b
      |                                   |
      | var a = 1;  //window.a = 1;       |
      |                                   |
      | function b() { -----------------> |
      |                                   | function a(){} // b.a(){} (hoisted to top)
      |                                   | a = 10;        // b.a = 10;
      |                                   | return;
      | } <------------------------------ |
      |                                   |
      | b();                              |
      | alert(a);  // alert(window.a);    |

我们可以看到function a(){}被提升到函数的顶部，因为它包含一个声明。如果我们删除function a(){}，代码将表现如下：

scope: window                         scope: b
      |                                   |
      | var a = 1;  //window.a = 1;       |
      |                                   |
      | function b() { -----------------> |
      |                                   | a = 10;        // window.a = 10;
      |                                   | return;
      | } <------------------------------ |
      |                                   |
      | b();                              |
      | alert(a);  // alert(window.a);    |

Answer 3

您的代码在功能上与此代码相同：

var a = 1;
function b() {
    var a = function() {}
    a = 10;
    return;
}
b();
alert(a);

使用function NAME() { ... }表示法有效地将该函数声明放在当前作用域的开头作为本地（到该作用域）声明。

实际上如果你执行

var a = 1;
var c= 2;
function b() {
    a()
    a = 10;
    return;
    function a() { alert(c) }
}
b();
alert(a);

将输出：

2
1

我个人不会使用这种表示法，我总是明确地使用作业。

jsfiddle

以下JavaScript范围如何工作

3 个答案: