Javascript函数范围和onclick调用

时间:2013-07-26 16:05:38

标签: javascript scope

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

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

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

谢谢!

1 个答案:

答案 0 :(得分:2)

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

在你的例子中:

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

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

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

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

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