addEventListener调用console.log()失败？浅谈函数调用

目录

引入

var dom = document.getElementByID("foo");
dom.addEventListener("click", console.log("hello"));

这一段代码是无法为”foo”对象绑定console.log函数，要用js实现此效果，要构建一个函数作为addEventListener的参数，如下所示

dom.addEventListener("click", function() {console.log("hello");});

或者

dom.addEventListener("click", () => {console.log("hello");});

=> 一个Arrow functions，详情见MDN文档箭头函数 - JavaScript | MDN
要直接地绑定，只能

dom.addEventListener("click", console.log);

注意此处的console.log不带括号
但是

<button id="foo" onclick="console.log(123)">foo<button>

却可以顺利地为foo绑定。js中还有很多需要函数作为输入参数情况，如setInterval()，也会发生类似结果。

问题的抽象

把所有需要函数作为参数地函数都简化成callback(args)函数

var callback = function(args) {
    args()
}

正常地使用

callback(foo);

如果foo的参数需要在callback外传入呢，此处将outside传入foo，再用callback调用foo(outside)

callback(() => foo(outside));//work
callback(foo(outside));//doesn't work

原因

1. foo(outside)没有合适的返回值

callback(foo(outside))会先执行foo(outside)，再取返回值作为callback(args)地参数。
在这种情况下可以等效成

var mid = foo(outside);
callback(mid);

如果有合适的返回值，也可以传foo(x)

var proxy = function(x) {
    return foo(x);
}
callback(proxy(outside));

2. 传函数名和匿名函数都能作为参数

console.log和callback, foo, proxy一样，都是函数名，callback(函数名)是没问题地。proxy返回了匿名函数，和callback(function() {})或者callback(() => {})一样，所以也是有效的。

总结

如果要传foo(outside)，传递匿名函数给callback

callback(() => foo(outside));

也可以设计一个这样的callback

var callback = (f, args) => { f(args); };
callback(foo, outside);

callback接收了outside，在内部使用outside调用了foo