为什么我不能在 jQuery 的 document.ready() 中定义函数？答案

【问题标题】：Why can I not define functions in jQuery's document.ready()?为什么我不能在 jQuery 的 document.ready() 中定义函数？
【发布时间】：2010-11-06 13:07:00
【问题描述】：

如果我将它们放在 document.ready() 函数中，函数就会出现未定义：

$(document).ready(function(){
  function foo()
  {
    alert('Bar');
  }
});

foo(); // Undefined

为什么会这样？我确定我只是需要一些简单的理解:)

【问题讨论】：

标签： javascript jquery

【解决方案1】：

不确定为什么在 ready() 范围内定义函数对您很重要，但您可以通过预先声明 foo 使其工作：

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
var foo;                           // Here's the difference
$(document).ready(function(){
  foo = function ()
  {
    alert('Bar');
  }
});
</script></head><body>
<input type="button" onclick="foo()" value="Click me">
</body></html>

显然您不能在ready() 之后立即从内联脚本调用foo()，因为ready() 代码尚未运行，但您可以稍后调用该函数。

只需确保在ready() 代码运行之前没有任何东西可以尝试调用foo()（或将foo() 的初始声明设为无害函数）。

【讨论】：

如果你需要调用foo()并带一些参数怎么办？你将如何传递它们，它们将如何被接收？
@alonso.torres：就像任何其他 JavaScript 函数一样：foo = function(x, y, z) {...} ... onclick="foo(1, 2, 3)"
@RichieHindle 请注意“声明函数的方式”很重要，请参阅stackoverflow.com/questions/11819425/…
@RichieHindle 同样，如果您不添加 var foo 并在发布 foo = function (){} 时保留函数声明，则变量 foo 将具有分配给它的全局范围。您可以在函数加载后通过console.log(window.foo); 简单地检查这一点。
@RichieHindle 感谢您的解决方案，它的工作;）

【解决方案2】：

您可以，但必须在 ready() 方法的范围内调用它们，否则它们会在 ready() 方法退出时失去范围。

例如，下面的代码将起作用：

$(document).ready(function(){
  function foo()
  {
    alert('Bar');
  }

  foo(); // still in the scope of the ready method
});

【讨论】：

有什么办法可以解决这个问题吗？改变范围？
简单。在 .ready(...) 范围之外定义它们。我不明白你为什么如此执着于这样做。它能给你带来什么好处？
@Oli，从代码组织的角度来看，能够在 .ready() 范围内声明它会更好。
@James，从代码的角度来看，这不会更好，如果需要从就绪范围的内部和外部调用 foo() 函数，请将其视为库或 API。在这种情况下，你让它接受所有必要的参数并吐出一个结果，没有副作用。

【解决方案3】：

如果您将它们放在任何不属于它们的范围内，它们将显示为未定义。如果您真的想在 $(document).ready(...) 范围之外使用它们，那么您需要在外部声明它们。如：

var foo;

$(document).ready(function(){
  foo = function()
  {
    alert('Bar');
  }
});

foo(); // works now because it is in scope

希望这会有所帮助。

【讨论】：

@jj_ Hari Om 的解决方案有效，因为对 myfnc 的调用与声明 myfnc 的范围相同。
是的 myfnc() 调用是，但是在输入 onclick 事件中 myfnc(param1, param2) 呢？
因为 myfnc 实际上并不是函数的名称。 Hari Om 创建一个匿名函数并将其分配给变量 myfnc。由于变量 myfnc 是全局的（JScript 中的变量具有全局范围，除非用“var”声明），所以它在 ready() 范围之外是可见的。函数声明和函数表达式的区别见stackoverflow.com/questions/1013385/…

【解决方案4】：

您的函数是在$(document).ready() 回调范围内定义的，并且无法从外部看到。要么在$(document).ready() 范围之外定义函数，要么只从内部调用它。

【讨论】：

【解决方案5】：

只是另一个补充：

在$(document).ready() 函数内声明函数或变量时，在文档中使用onclick() 绑定时这些是不可访问的。

您可以将声明移到$(document).ready() 之外，也可以在`$(document).ready() 中使用$('#element').on('click', function() {})。

【讨论】：

【解决方案6】：

<script>
    $(document).ready(function(){
      myfnc = function (param1, param2)
      {
        alert('Hello');
      }
      myfnc();
    });
</script>
<input type="button" onclick="myfnc('arg1', 'arg2')" value="Click me">

【讨论】：