先看一个例子: html部分: <input type="button" id="btn" value="点击"/> js: <script type="text/javascript"> var btn=document.getElementById("btn"); btn.onclick=function(){ console.log('2222'); } (function(){console.log("徐文华");})(); </script> 这段代码有没有什么问题呢?点击按钮能不能得到该有的效果? 看图:intermediate value (中间值)不是一个方法 我们把代码稍微修改一下: btn.onclick=function(){ console.log('2222'); }(function(){console.log("徐文华");}) (); 这里前面相当于一个匿名函数,即function(){}(function(){console.log("徐文华");}) 这个返回的结果后面再加一个括号,相当于去调用这个返回值这个函数,而返回值并不是一个函数, 所以出现错误, 我们来验证一下: <script type="text/javascript"> var btn=document.getElementById("btn"); function a(){console.log("这里是a的函数");return say;} function say(){alert("这是say函数");} btn.onclick=function(){ console.log('1111'); return a; } (function(){console.log("2222");})();
我们看到,控制台显示出了正确的信息,按钮事件也可以触发 第一个匿名函数返回了函数a,接着调用a函数,即a(),a函数又返回say函数, 把值赋给了btn.onlick,所以后面按钮点击事件得到了执行. 这样,说明我们之前的猜想是正确的 </script> 之前那个问题可以这样写: 在那个匿名函数加一个';'这样写就可以了 这就相当于把两段代码隔离开来了。 var func=10; btn.onclick=function(){ console.log('2222'); return func; }; (function(){console.log("5555");}) (); 总结: //能把函数声明变为函数表达式的几种方法 //小括号() //赋值操作 //逻辑运算符 ! 可以, 但是||和 ^ 则不可以 //数字运算符 +,- (function(){ console.log("111"); })(); var func=function(){ console.log('222'); }(); !function(){ console.log('333'); }(); +function(){ console.log('444'); }(); -function(){ console.log('666'); }();
就是把函数声明当做一个函数表达式来处理,而不会出现语法错误。
转载请注明:副业 and 脱单研究所 » js中自执行匿名函数的一些事