小编典典

JavaScript函数声明和评估顺序

javascript

为什么这些示例中的第一个不起作用,而其他所有示例都起作用?

// 1 - does not work
(function() {
setTimeout(someFunction1, 10);
var someFunction1 = function() { alert('here1'); };
})();

// 2
(function() {
setTimeout(someFunction2, 10);
function someFunction2() { alert('here2'); }
})();

// 3
(function() {
setTimeout(function() { someFunction3(); }, 10);
var someFunction3 = function() { alert('here3'); };
})();

// 4
(function() {
setTimeout(function() { someFunction4(); }, 10);
function someFunction4() { alert('here4'); }
})();

阅读 270

收藏
2020-04-25

共1个答案

小编典典

这既不是范围问题,也不是关闭问题。问题在于 声明表达式 之间的理解。

JavaScript代码(即使是Netscape的第一个JavaScript版本和Microsoft的第一个副本)也要分两个阶段处理:

阶段1:编译-在此阶段,代码被编译成语法树(字节码或二进制取决于引擎)。

阶段2:执行-然后解析解析的代码。

函数 声明 的语法为:

function name (arguments) {code}

参数当然是可选的(代码也是可选的,但这又意味着什么呢?)。

但是JavaScript也允许您使用 表达式 创建函数。函数表达式的语法与函数声明相似,区别在于它们是在表达式上下文中编写的。表达式为:

  1. =标志右边(或:对象文字上)的任何内容。
  2. 括号中的任何内容()
  3. 函数的参数(实际上已经被2覆盖了)。

*与 *声明 不同的 表达式 在执行阶段而不是在编译阶段进行处理。因此,表达顺序很重要。

因此,澄清一下:


// 1
(function() {
setTimeout(someFunction, 10);
var someFunction = function() { alert('here1'); };
})();

阶段1:编译。编译器看到该变量someFunction已定义,因此可以创建它。默认情况下,所有创建的变量的值均为undefined。请注意,编译器此时无法分配值,因为这些值可能需要解释器执行一些代码才能返回要分配的值。并且在这个阶段我们还没有执行代码。

阶段2:执行。解释器看到您要将变量传递someFunction给setTimeout。确实如此。不幸的是的当前值someFunction是不确定的。


// 2
(function() {
setTimeout(someFunction, 10);
function someFunction() { alert('here2'); }
})();

阶段1:编译。编译器会看到您正在声明一个名称为someFunction的函数,因此它将创建它。

阶段2:解释器看到您要传递someFunction给setTimeout。确实如此。的当前值someFunction是其编译的函数声明。


// 3
(function() {
setTimeout(function() { someFunction(); }, 10);
var someFunction = function() { alert('here3'); };
})();

阶段1:编译。编译器会看到您已经声明了一个变量someFunction并创建了它。和以前一样,它的值是不确定的。

阶段2:执行。解释器将匿名函数传递给setTimeout,以便稍后执行。在此函数中,您会看到您正在使用该变量,someFunction因此它将创建该变量的闭包。此时,的值someFunction仍未定义。然后,您会看到将函数分配给someFunction。此时,的值someFunction不再是未定义的。1/100秒后,setTimeout触发,并调用someFunction。由于其值不再是不确定的,因此它可以工作。


情况4实际上是情况2的另一个版本,其中包含了情况3 someFunction


附加说明:

您可能想知道为什么setTimeout(someFunction, 10)在someFunction的本地副本和传递给setTimeout的本地副本之间不创建闭包。答案是,JavaScript中的函数参数 始终
是数值(如果是数字或字符串)或其他所有引用都按值传递。因此,setTimeout实际上并不会获取传递给它的变量some​​Function(这将意味着正在创建一个闭包),而只会获取someFunction所引用的对象(在这种情况下为函数)。这是JavaScript中打破闭合(例如在循环中)使用最广泛的机制。

2020-04-25