javascript - 调用 jQuery 中的对象作为回调，无法正常工作

Question

我正在尝试了解有关调用对象 的内容，但我遗漏了一些内容。下面我写了虚拟代码(有效)所以我可以说明我的问题。这是一些代码。

html:

<button id="test">tst</button>

js:

var testObj = {
    text: function(){
        console.log("is it working???");
    }
}

//on button click
$('#test').click(function(){
    console.log(testObj.text());
});

现在，有了这个，当我点击那个按钮时，它工作正常并且控制台显示“它在工作吗”，正如它应该的那样。

作为测试，当我做同样的事情但从对象调用中删除括号时，将其保留为

$('#test').click(function(){
    console.log(testObj.text);
});

控制台满怀期待地把它作为一个对象显示给我。 Google Chrome 中的控制台特别指出 “function testObj.text()”。本质上，它不会运行内部的代码，这也是可以的。

问题来了

当我尝试调用 testObj 对象作为回调方法时，它不起作用。

这是我所拥有的:

$('#test').click(function(){
    $(this).animate({"font-size": "20"}, 3000, "swing",  testObj.text());
});

直接在上面的这段代码中，最终发生的是，尽管“它在工作吗”确实出现在控制台中，但它不会等待 3 秒然后激活回调，单击按钮后立即触发回调。本质上它是错误触发回调。

现在，当我使用相同的代码，但从对象调用中删除括号时，它就可以正常工作了。动画播放并在 3 秒后完成，然后触发回调并按预期在控制台上显示“它在工作吗”。

$('#test').click(function(){
    $(this).animate({"font-size": "20"}, 3000, "swing",  testObj.text);
});

在第一个示例中一直查看上面的内容，当我删除括号时，控制台将它作为一个对象显示给我并且没有运行内部代码，我不明白为什么它现在可以在回调中使用括号已删除。

我的问题是，为什么会这样？我在 google 上上下搜索，但我什至不确定我在搜索什么。

Answer 1

圆括号导致函数执行。传递回调时，传递的是函数名称作为对它的引用。 (了解在 JavaScript 中函数是“一等公民”，可以像其他任何对象一样用作对象。)

所以当你做这样的事情时:

var x = someObject.someFunction;

您正在将 x 设置为该函数引用。这允许您将其作为函数执行:

x();

但是当你这样做的时候:

var x = someObject.someFunction();

您正在执行 函数并将其结果 设置为x。所以这个:

$(this).animate({"font-size": "20"}, 3000, "swing",  testObj.text());

执行testObj.text()函数(写入控制台)并将其结果(undefined)设置为回调，导致错误jQuery 尝试调用该回调。但是这个:

$(this).animate({"font-size": "20"}, 3000, "swing",  testObj.text);

不执行函数。它将函数作为引用传递给 jQuery 稍后将执行的引用。