我具有以下功能

function hello() {
 alert("hi!");
}


这段代码:

var elem = document.getElementById("btn");
elem.onclick = hello;


我的问题可能是有点难以理解,所以请允许我:
是什么使该代码段与常规调用完全区分开,或者是什么使该代码段需要引用函数变量而不是常规调用? (hello();

我怎么知道应该在哪里提供对该函数的引用以及何时应该实际调用它?

评论

对于这些动态语言,我可能是错的(刚开始看python),但是我认为参考是当您要为所述函数创建别名,而调用实际上是在您要调用时。 (EG。var = hello then var()与在调用var()的地方调用hello()相同

#1 楼

好吧,onclick属性需要一个对函数的引用,以便在单击元素时执行该函数。通常是:

element.onclick = funcRef;




element.onclick = function () {
    funcRef();
};


(当然,最好使用addEventListener

注意它们都是如何引用函数,而不是调用。 (第一个示例)。

要专门调用函数时,请使用attachEvent(第二个示例)进行调用。但是请注意,在第二个示例中,如何仍然引用了分配给()的函数-它只是一个匿名函数。

也许更重要的部分:

有些人认为您想这样做:除非返回值是一个函数,否则这不是您想要的。

我认为故事的寓意是,当您想要/需要立即执行某些操作时,就调用该函数。如果需要该函数供以后使用或需要存储,则不要调用它。

评论


立即执行位非常重要。

– Wex
13年4月8日在18:33

@Wex哈哈是的,我似乎破坏了它。尝试思考如何进一步扩展

–伊恩
13年4月8日在18:33

有一个有趣的特殊情况:element.onclick = getClickHandler()

– John Dvorak
13年4月8日在18:35

@JanDvorak可能不太明显,但是我已经包含了“除非返回值是一个函数,否则这不是您想要的。”我不想太过深入,以免混淆OP

–伊恩
13年4月8日在18:36



@frrlod好的! stackoverflow.com/questions/6348494/addeventlistener-vs-onclick

–伊恩
13年4月8日在19:20

#2 楼

您要它立即执行吗?然后调用它。

a=hello()表示“尽快调用hello(),并将其返回值设置为a”。

另一方面,a=hello表示“ ahello的别名。如果调用a(),将得到与调用hello()相同的结果。

将后者用于回调等,您想在其中告诉浏览器事件发生后想要发生什么。例如,您可能想说“用户单击时呼叫hello()”(如示例中所示)。或者,“当AJAX查询返回结果时,对返回的数据调用callback()函数”。

#3 楼


我怎么知道应该在哪里引用该函数,以及何时应该实际调用它?


您是否需要该函数来现在运行吗?

要添加()以执行它

是否需要引用函数以便稍后调用?不添加()。

#4 楼

无论如何调用,都需要对函数的引用。此处的区别在于您没有显式调用hello函数。您正在将对该函数的引用分配给elem DOM节点的onclick事件处理程序,以便在为该节点激发onclick时调用您的函数。

#5 楼

JavaScript中几乎所有语句都具有返回值。除非另有说明,否则JavaScript中的函数在调用时将返回undefined。因此,如果要返回一个函数,则在此赋值语句中调用函数的唯一上下文是:

function hello() {
    return function() {
        alert("hi!");
    }
}

elem.onclick = hello();


#6 楼

hello()表示您调用该函数,这意味着该函数将直接执行。

当您拥有elem.onclick = hello时,这称为回调。你好不会直接执行的,而只有在触发某个事件时才会执行(在这种情况下,当元素被点击时)