引用函数，调用函数，揭秘

Posted 2020-06-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了引用函数，调用函数，揭秘相关的知识，希望对你有一定的参考价值。

问题引入：在看《Jquery基础教程》第四版的时，P34页有这样一段话

引用函数与调用函数

　　这里在将函数指定为处理程序时，省略了后面的圆括号，只使用了函数名。如果带着圆括号，函数会被立即调用；没有圆括号，函数名就只是函数的标识符或函数的引用，可以用于在将来再调用函数。

这引发了我对于绑定事件方式的思考。我们都知道为元素绑定事件处理程序的时，内联方式要这样写 <body onload="doSomething();">...</body> ，或者javascript代码要这样写

1 window.onload=doSomething;//或下一行的方式
2 window.addEventListener(‘load‘,doSomething,false);
3 function doSomething(){
4     ...
5  }

我们一直都是这样用，但是有没有思考过为什么内联方式的 onload="doSomething()" 要加"()"？我给它不加可以吗？，而js代码的 onload 和 addEventListener 为什么不加"()"，我给它加上可以吗？

问题思考：如上面书里所说加"()"是调用函数，js代码执行到那一行时函数会被立即调用并执行。不加"()"是引用函数， window.onload 属性只是指向 doSomething 函数体(为什么说是指向而不是将简单的函数体赋值给onload属性待会验证)，待将来触发了 onload事件，doSomething才会被加到任务队列等待主函数将它执行。
问题验证：

1.标准内联方式，控制台会如约输出"test"。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title></title>
 5 </head>
 6 <body onload="doSomething()">
 7 <script type="text/javascript">
 8   function doSomething(){
 9     console.log(‘test‘);
10   }
11 </script>
12 </body>
13 </html>

2.内联方式不加"()"

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title></title>
 5 </head>
 6 <body onload="doSomething">
 7 <script type="text/javascript">
 8   function doSomething(){
 9     console.log(‘test‘);
10   }
11 </script>
12 </body>
13 </html>