为什么在jQuery中调用函数需要被包装在一个方法中？ [英] Why does calling a function in jQuery need to be wrapped in a method?

问题描述

  function myFunction（）{
 ... 
 } 
  

我想从事件处理函数中调用它。为什么这个构造不会调用我的函数？

  $（window）.resize（myFunction（））; 
  

但是这样做：

  $（窗口）.resize（函数（）{myFunction的（）}）; 
  

这些类型的调用有什么区别？

解决方案

  $（window）.resize（myFunction（））; 
  

立即调用 myFunction 返回值传递给 resize 。另一方面，



 
 
 
在函数名称/引用之后添加括号。
  $（窗口）.resize（函数（）{myFunction的（）}）; 
  

将匿名函数传递给 resize code>。 myFunction 仅在调用外部函数时被调用。

匿名函数没什么特别的。在这种情况下，它只是某种内联函数定义。你可以很容易地用函数引用来替换它：

  var handler = function（）{myFunction（）}; //取出函数定义
 $（window）.resize（handler）; //并将其替换为新名称
  

现在您可以看到函数后没有括号名称，这意味着处理程序不被调用，只传递参考。

我希望你也可以看到现在在这个例子中创建一个新函数是没有必要的。只需传递对 myFunction 的引用即可实现： $（窗口）.resize（myFunction的）;


---

但这两种方式都有它们的用例。 >

第一个例子 $（window）.resize（myFunction（））; c> myFunction 返回应该用作事件处理函数的函数

：

  function myFunction（）{
 var handler = function（）{}; 
返回处理程序; 
} 
  

可能调用的处理程序取决于传递给 myFunction 。

如果要调用 myFunction 并传递一个匿名函数一些具体的参数：

pre $ function myFunction（a，b）{
alert（a + b）;

$ b $（window）.resize（function（）{
myFunction（40，2）;
}）;


---

更新：

@TJ Crowder 对 事件对象。每个事件处理程序获取作为第一个参数传递的事件对象如果您将函数定义为

 函数myFunction（event）{
 ... 
} 
  

使用匿名函数可以（更容易）访问它，您必须通过它：

  $（window）.resize（function（event）{myFunction（event）}）; 
  

如果您想使用它。

Let's say I have a function:

function myFunction() {
 ...
}

I want to call it from event handler. Why this construction doesn't call my function?

$(window).resize(myFunction());

But this does the trick:

$(window).resize(function(){myFunction()});

What is the difference between these types of calling?

解决方案

$(window).resize(myFunction());

immediately calls myFunction and passes the return value to resize. Adding parenthesis after a function name/reference calls the function.

On the other hand,

$(window).resize(function(){myFunction()});

passes an anonymous function to resize. myFunction is only called when the outer function is called.

Anonymous functions are nothing special. In this case it is just some kind of inline function definition. You can easily replace it with a function reference:

var handler = function(){myFunction()}; // take out the function definition
$(window).resize(handler);  // and replace it with the new name

Now you can see that there are no parenthesis after the function name, which means, handler is not called, only the reference is passed.

I hope you can also see now that creating a new function in this example is not necessary. You can achieve the same by simply passing a reference to myFunction:

$(window).resize(myFunction);

---

But both ways have their use cases.

The first example $(window).resize(myFunction()); can still be useful if myFunction returns a function that should be used as event handler:

function myFunction() {
    var handler = function() {};
    return handler;
}

Maybe the handler retuned depends on a parameter passed to myFunction.

Passing an anonymous function is necessary if you want to call myFunction with some specific arguments:

function myFunction(a, b) {
    alert(a + b);
}

$(window).resize(function(){
    myFunction(40, 2);
});

---

Update:

@T.J. Crowder made an important comment about the event object. Every event handler gets the event object passed as first parameter. If you'd define your function as

function myFunction(event) {
 ...
}

to have (easier) access to it, using an anonymous function, you would have to pass it through:

$(window).resize(function(event){myFunction(event)});

if you want to use it.

这篇关于为什么在jQuery中调用函数需要被包装在一个方法中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！