在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.showVS 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）。