在 JavaScript 中调用带括号和不带括号的函数的区别

Question

我正在处理一个 JavaScript 文件上传事件。我有以下初始化程序和以下函数：

初始化器

    $('#s3-uploader').S3Uploader({
        allow_multiple_files: false,
        before_add: progressBar.show,
        progress_bar_target: $('.upload-progress-bar'),
        remove_completed_progress_bar: false
    }).bind("s3_upload_complete", function(e, content) {
        console.log(content);
    });

功能

var progressBar = {
    show: function() {
        $('.upload-progress-bar').show();
        return true;
    }
}

在初始化程序中，我注意到如果我这样做会有所不同

before_add: progressBar.show 与before_add: progressBar.show()。使用括号，即使绑定到before_add 选项也会调用一次，而没有括号则不会。

对我观察到的行为有解释吗？

Answer 1

带有括号的方法被调用因为括号，该调用的结果将存储在before_add中。

如果没有括号，您可以在变量中存储对函数的引用（或“指针”，如果您愿意的话）。这样，每当有人调用 before_add() 时都会调用它。

如果这不能解决问题，也许这会有所帮助：

function Foo() {
    return 'Cool!';
}

function Bar(arg) {
    console.log(arg);
}

// Store the >>result of the invocation of the Foo function<< into X
var x = Foo();
console.log(x);

// Store >>a reference to the Bar function<< in y
var y = Bar;
// Invoke the referenced method
y('Woah!');

// Also, show what y is:
console.log(y);

// Now, try Bar **with** parentheses:
var z = Bar('Whut?');

// By now, 'Whut?' as already been output to the console; the below line will
// return undefined because the invocation of Bar() didn't return anything.
console.log(z);

如果您随后查看浏览器的控制台窗口，您应该会看到：

Cool!
Woah!
function Bar(arg)
Whut?
undefined

第 1 行是调用 Foo() 的结果，
第 2 行是调用 Bar() "via" y,
的结果 第 3 行是y 的“内容”，
第 4 行是 var z = Bar('Whut?'); 行的结果； Bar 函数被调用，
第 5 行显示调用 Bar() 并将结果分配给 z 没有返回任何内容（因此：undefined）。

Answer 2

函数在 JavaScript 中是一流的。这意味着它们可以像任何其他参数或值一样被传递。你看到的是传递函数和传递函数返回的值之间的区别。

在你的例子中：

before_add: progressBar.show

您希望传递 progressBar.show 而不是 progressBar.show()，因为前者代表一个函数 (function () {$('.upload-progress-bar').show(); return true;})，而后者代表一个返回结果 (true)。

这是另一个例子：

// All this function does is call whatever function is passed to it
var callAnotherFunction = function (func) {
    return func()
}
// Returns 3 — that's all
var return3 = function () { return 3 }

// `callAnotherFunction` is passed `return3`
// so `callAnotherFunction` will `return return3()` === `return 3`
// so `3` is printed
document.write(callAnotherFunction(return3))

// `callAnotherFunction(return3())` is the same as `callAnotherFunction(3)`.
// This will print nothing because, in `callAnotherFunction`
// `func` is 3, not a function
// so it cannot be invoked, so nothing is returned
// and `document.write` doesn't print anything.
document.write(callAnotherFunction(return3()))