IT不死旗下博客隆重开通啦,欢迎各位小伙伴们来围观 。

js中自执行匿名函数的一些事

学习笔记 Xueqi 1104℃ 0评论
先看一个例子:

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');
 }();


就是把函数声明当做一个函数表达式来处理,而不会出现语法错误。

转载请注明:凌风阁 » js中自执行匿名函数的一些事

喜欢 (6)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址