function 和 void、!、+、-、~

2012 - 8 - 18 作者 : Jimco 分类 : JavaScript

       近期看了些 bootstrap 的源码,发现些有意思的东西,拿出来分享一下。先上一段代码:

!function(){ console.log("Hello world!") }();
       问题来了,function之前加上!是怎么个意思?你会发现这种写法在 bootstrap 的 js plugins 中相当常见。

       打开控制台,copy 上面的代码,执行之后返回 true,为什么会是 true 我想应该不难理解,因为这个匿名函数没有返回值,默认返回的就是 undefined ,求反的结果自然就是 true。现在我们再来试试下面的代码:

1+function(){ console.log("Hello world!") }();
void function(){ console.log("Hello world!") }();
~function(){ console.log("Hello world!") }();
+function(){ console.log("Hello world!") }();

       到这儿,你肯定还会有疑问,这些个 ! 、void 、 + 、 - 、~…到底有什么用处呢?再来,上代码:

(function() {
  console.log('first');
}())

(function() {
  console.log('second');
}())

// TypeError: undefined is not a function

       现在,相信很多朋友就能看出问题所在了。返回的结果是 TypeError ,因为出现了 ( undefined )(undefined),这返回的结果不报错这才怪了呢!再试试这段代码: 

!(function() {
  console.log('first');
}())

!(function() {
  console.log('second');
}())

//true

       这就应该很容易理解了,赋值、逻辑、甚至是逗号,各种操作符都可以告诉解析器,这个不是函数声明。并且,对函数一元运算可以算得上是消除歧义最快的方式,感叹号只是其中之一。文章参考了 stack overfolw ,有兴趣的朋友可以去看看:http://stackoverflow.com/questions/8611700/how-exactly-does-function-work/


3998 人围观 / 5 条评论 ↓快速评论↓

  • trektrek到此围观,您的文章写的真是太惊天地,泣鬼神了,佩服万分,发此评论以感涕零,三拜!!

    trektrek 2013-03-23 13:58 回复

  • 加上分号,也行咯。阿狸3

    。潇 2012-08-20 00:17 回复

    • @。潇:多种解决方案!话说小米那会儿貌似比较喜欢用双分号“;;”来避免这类错误啊~

      Jimco 2012-08-20 10:22 回复

  • 逻辑运算符。后面的都是执行返回一个结果,而函数执行返回undefined。结果报错。不错,不错。

    <code>
    (function(){console.log('1'); return function(){};}())
    (function(){console.log('2')}())
    </code>
    这样貌似就好了。

    。潇 2012-08-20 00:15 回复

    • @。潇:阿狸1我的评论模块得重构了,目前超过两行就给 hidden 了~
      (function(){console.log('1'); return function(){};}())
      (function(){console.log('2')}())

      Jimco 2012-08-20 10:26 回复

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18

Powered by Jimco

©2013 前端那些事儿 Designed by Jimco

About me|意见反馈