以下JavaScript范围如何工作

Question

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

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

代码将提醒1!但是如果我们消除"function a(){}"部分,代码将提醒10.

那么,它是如何运作的!"函数a(){}"在这里做了什么以及它如何影响范围.

我也无法理解一个空的"回归"的含义.在这段代码中.

那么,这段代码如何依赖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的好答案之外,我还试图想象这种情况.

使用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