Javascript函数前面的感叹号是用来干嘛的

今天看到一个库的代码这么写的

!function foo() {}();

感觉这应该是一个Self-executing anonymous function,不过一般我们都这么写啊

(function () {})();

感觉人家应该是有理由的。在网上查了一会,原来用!还真的有好处。先给自己提两个问题:

  1. 加一个!有啥作用。
  2. 有啥好处。

!有啥作用

  1. 下面为啥错误
function foo(){ /* code */ }(); 

function () {}是一个函数声明(是一个语句),}后面解析语句结束了。而后面的()里面需要包括一个表达式,这里没有,所以报告错误。注意JavaScript的括号中一定是表达式哦,不能为空。

  1. 下面为啥错误。
function (){ /* code */ }(); 

这里有人会说,这不和1一样的嘛。呵呵呵,你看看现在函数有没有名字,这里的错误是因为现在要声明一个函数,但是函数却没有名字。函数只有在表达式中才可以匿名,函数表达式与函数声明的最主要区别是函数名称(function name),在函数表达式中可忽略它,从而创建匿名函数(anonymous functions)。这里还没解析到括号就已经语法错误了。

Javascript函数前面的感叹号是用来干嘛的_第1张图片
1和2是不同的语法错误

  1. 为啥foo()可以成功。因为foo是函数名称。在当前作用域可以找到这个函数的名字,然后调用。
function foo(){ /* code */ }
foo();
  1. 为啥下面也可以成功,因为foo只是function表达式的引用,所以等于调用一个表达式。注意这个时候foo并不是函数名字,只是一个变量名字。
var foo = function(){};
foo();
  1. 下面是怎么回事
function foo(){ /* code */ }( 1 );

上面这个代码语法没错,但是不能调用函数,因为它等于下面

 function foo(){ /* code */ }
  ( 1 );
  1. 为啥下面能工作
(function () {})();

在JavaScript中,括号里面只能是表达式,不能是语句,所以上面的写法强制让解析引擎认为这里是一个函数表达式,后面在加上()就可以调用了,参见3。

  1. 其他方式
 // Either of the following two patterns can be used to immediately invoke
  // a function expression, utilizing the function's execution context to
  // create "privacy."

  (function(){ /* code */ }()); // Crockford recommends this one
  (function(){ /* code */ })(); // But this one works just as well

  // Because the point of the parens or coercing operators is to disambiguate
  // between function expressions and function declarations, they can be
  // omitted when the parser already expects an expression (but please see the
  // "important note" below).

  var i = function(){ return 10; }();
  true && function(){ /* code */ }();
  0, function(){ /* code */ }();

  // If you don't care about the return value, or the possibility of making
  // your code slightly harder to read, you can save a byte by just prefixing
  // the function with a unary operator.

  !function(){ /* code */ }();
  ~function(){ /* code */ }();
  -function(){ /* code */ }();
  +function(){ /* code */ }();

  // Here's another variation, from @kuvos - I'm not sure of the performance
  // implications, if any, of using the `new` keyword, but it works.
  // http://twitter.com/kuvos/status/18209252090847232

  new function(){ /* code */ }
  new function(){ /* code */ }() // Only need parens if passing arguments

!有啥好处

第一个好处就是打括号比较麻烦,要不然lisp语言造就流行了。那么还有没有其他好处呢。

!function abc(){}()
!function bca(){}();

和下面是一样的。

!function abc(){}()
;(function bca(){})();

意思就是感叹号可以帮助我们家上一个分号,防止代码在合并的时候发生错误。javascript经常会把几个js合并成一个公告的js文件,来加快下载速度。所以比较好的写法就是

!function bca(){}();

注意我们自己是要加上分号的,感叹号是为了防止别人没加哦。

关于ASI-Automatic semicolon insertion in JavaScript

这篇文章的思想来源于这个讨论what-does-the-exclamation-mark-do-before-the-function

你可能感兴趣的:(Javascript函数前面的感叹号是用来干嘛的)