Javascript 函数范围和从 onclick 调用

Question

对于 JavasScript，假设在 outerFunction() 中定义了一个 innerFunction()。如果您尝试在 outerFunction() 之外调用 innerFunction()，将会出现错误，因为它未在范围内定义。
但是，如果在 outerFunction() 中，您将 innerFunction() 分配给某个事件，例如点击事件，用于某些外部元素，例如 按钮，然后 innerFunction() 可以从按钮的范围内调用，无论它是什么。那么，为什么您能够从不同的范围对 innerFunction() 进行第二次调用。

我有一个工作示例:http://jsfiddle.net/rcmoore38/gPrMk/

初始的 changeColor() 调用不起作用，但是当 changeColor() 被分配给 button 时，可以通过按钮。

谢谢!

Answer 1

没有“按钮的范围”。发生的情况是您从内部函数可见的范围分配事件监听器，这在 JavaScript 中很重要。 JS 中的范围是关于函数声明的位置。

在你的例子中:

$("#b").click(function() { changeColor() });

函数 changeColor 可通过 closure 获得在匿名函数内部，因为它是在外部作用域中声明的。定义嵌套函数时，父函数中的所有变量和函数都将在其中可用。因此，当单击元素并调用匿名函数时，它仍然具有对 changeColor 的引用，并且能够调用它。

你也可以在不使用闭包的情况下设置事件处理程序，如下所示:

$("#b").click(changeColor);

正如我所说，重要的是当您引用 changeColor 时它在范围内(而不是当它实际调用时，在这种情况下，由浏览器调用)。