javascript立即执行某个函数：插件中function(){}()再思考-唐霜

几种方式立即执行函数【本文首发于唐霜的博客】

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

在javascript中定义一个函数，并转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net且立即去执行它。（这个情况虽然看上去很疯原创内容，盗版必究。本文作者：唐霜，转载请注明出处。狂，但是实际上一定会用到，因为函数一旦执【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。行完，内部的局部变量会被释放，内存也释放【原创不易，请尊重版权】【原创内容，转载请注明出处】出来。）我们可能第一种想到的方法是：

【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

// 第一种
function a() {}
a();

当然，还有另外一种相对高深的办法：本文作者：唐霜，转载请注明出处。

window.onload = function() {}

// 第二种
var a = function(){}a();

不过这也给了我们另外一个思路：本文作者：唐霜，转载请注明出处。

function fun() {}
var a = fun();
a();

给我们留下一个思考：未经授权，禁止复制转载。

function(){}; // javascript语句中以function开始没有实际的效果

一旦某条语句以function开始，这条【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。语句没办法赋值给某个变量去执行它（说到这未经授权，禁止复制转载。【未经授权禁止转载】里，函数名可以可以理解为一个被赋值为某个本文版权归作者所有，未经授权不得转载。【转载请注明来源】函数的变量而已）。

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

下面是真相的时候：【原创内容，转载请注明出处】

【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】原创内容，盗版必究。【本文受版权保护】

function a() {}
a();

如果函数名是一个被赋值的变量（也就是a）原创内容，盗版必究。【本文受版权保护】，那么为何不将其实际的值替换掉变量名呢（【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。也就是把a()替换为function()【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】()）？于是，上面这段代码变为：

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】原创内容，盗版必究。

function(){}(); // 前面加粗部分代表a

但是在前面已经提到了，function开【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net始的语句没有实际的效果，因此，上面这个语【本文首发于唐霜的博客】未经授权，禁止复制转载。句不会有实际效果。不仅如此，这句代码还会【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。抛出错误提示：SyntaxError: Unexpected token。本文版权归作者所有，未经授权不得转载。

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】

此处括号的正确理解【访问 www.tangshuang.net 获取更多精彩内容】

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。原创内容，盗版必究。

造成上述这个异常的原因是，javascr本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】ipt对语句的结束并不是以;作为标识，在【原创内容，转载请注明出处】【原创内容，转载请注明出处】这种普通情况下，}被作为语句结束的标识，原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】因此，上述语句被解释为：

【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【原创内容，转载请注明出处】

function(){};();

因此在执行()时，会抛出表达式错误。而如【原创内容，转载请注明出处】【本文首发于唐霜的博客】果我们执行：

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【作者：唐霜】

function(){};(1);

【本文受版权保护】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】

我理解的()，在javascript中有未经授权，禁止复制转载。【本文首发于唐霜的博客】两种：一种是确定优先级，另一种是分组。当本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。然，在声明函数和函数使用的时候也会用到(【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】)，但这是一种语法，而不是运算。确定优先【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。级就是括号内的表达式先于括号外的表达式运本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】算，例如：

【本文受版权保护】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【本文受版权保护】

1+(2*5)和(1+2)*5或(1+2)*(2+3)

而分组一般是在正则表达式中使用的概念，例【本文受版权保护】【本文首发于唐霜的博客】如：

/<(.*)ok(this) is myhouse(.*)>/

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

在进行匹配的时候，上面的小括号将匹配结果原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net分为三组进行返回，在替换的时候，可以对每本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】个组分别进行替换。因此，分组的概念，应该【版权所有】唐霜 www.tangshuang.net【转载请注明来源】和本文没有关系。因此，本文中的()，只有【本文首发于唐霜的博客】原创内容，盗版必究。两种理解，一种是运算符，一种是语法。

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

在上面的代码中【作者：唐霜】(1);中的原创内容，盗版必究。();很明显是一个运算符，括号内必须有表达式，【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】否则就是语法错误。

(function(){});

恭喜你，你的函数初始化，虽然从结果上并没【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】有什么卵用，而且和直接function(未经授权，禁止复制转载。【本文受版权保护】){}也没有什么不同，只不过是把func【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.nettion(){}提高了运算的优先级而已。

【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

可是，当我们执行下面的代码的时候，情况就【原创内容，转载请注明出处】未经授权，禁止复制转载。大不相同了：

(function(){})();

代码是从左往右执行的，就像原创内容，盗版必究。a() || b();一样如果a()为真，就不执行b()了。同【本文首发于唐霜的博客】【本文首发于唐霜的博客】样的道理，上面的代码中，红色部分作为一个【原创内容，转载请注明出处】【转载请注明来源】表达式，执行完毕，代表着一个函数已经初始原创内容，盗版必究。【转载请注明来源】化完毕，如果我们回到：function(){}【本文受版权保护】();，也就是前文抛出错误的那个语句你就【本文首发于唐霜的博客】【本文受版权保护】会发现，神奇的事情发生了，红色部分俨然就【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。是我们要的a，所以整个语句合起来也就是：a();，就这样，函数被执行了。【关注微信公众号：wwwtangshuangnet】

在这条代码中，第二个()不再是运算符，而转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。是函数的括号。而第一个()，则是一个运算【作者：唐霜】【作者：唐霜】符，提高了内部function的运算优先【原创不易，请尊重版权】【本文受版权保护】级，内部被优先执行，得到结果后，与第二个【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net()构成函数语法，执行了函数。

【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【转载请注明来源】原创内容，盗版必究。

我们再回头来看()运算符的作用，来看一下转载请注明出处：www.tangshuang.net原创内容，盗版必究。下面这个代码：

()();

转载请注明出处：www.tangshuang.net【本文受版权保护】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】

(a+b)(c+d);

从来没有见过。如果世界上存在一种运算，就本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】是没有任何运算，那么上面是成立的，但是，本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】如果这种假设不成立的话，上面的代码就是错原创内容，盗版必究。原创内容，盗版必究。误的。我们从来没有见过(1+2)(3+4【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。)，虽然我们小学的时候写过这样的算式，但本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】是在代码中是不存在的。

(1+2)(3+4);// TypeError: (1 + 2) is not a function

提示的不是语法错误，而是数据类型错误，第本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。二个括号前面的不是一个函数。也就是说，未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。第二个括号前面的，如果是函数类型，就正确原创内容，盗版必究。【作者：唐霜】了！那么世界上有没有一种算法，使运算后返【本文首发于唐霜的博客】【未经授权禁止转载】回值为函数呢？比如 fun1+fun2=【版权所有，侵权必究】【原创不易，请尊重版权】fun3？好像我还从来没有遇到过，因此，【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net想在第一个括号中构建一种运算使该代码成立【作者：唐霜】本文版权归作者所有，未经授权不得转载。，还需要高高手来实现。唯一的解决办法，就【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net是在第一个括号中委以函数，也就是(fu未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netnction(){})(3+4)，而3+【作者：唐霜】著作权归作者所有，禁止商业用途转载。4不过仅仅是作为前面这个函数的参数予以运【作者：唐霜】转载请注明出处：www.tangshuang.net行。

【作者：唐霜】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】

匿名函数的立即执行【版权所有，侵权必究】

当你以为挖到宝藏的时候，下面的解释或许让【原创不易，请尊重版权】原创内容，盗版必究。你再一次开了脑洞。我们提到functio【转载请注明来源】未经授权，禁止复制转载。n开头的语句虽然初始化函数，但是函数并不【本文受版权保护】【原创内容，转载请注明出处】被执行，其运行效果相当于什么也没发生。

为了提交它的优先级，我们再用一次()吧：

(function(){}());

这次，我们直接把函数表达式和后面的()放原创内容，盗版必究。【原创内容，转载请注明出处】在一个()里面，这下子奇迹也发生了，空号【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。内部是一个表达式转载请注明出处：www.tangshuang.net，表达式的意思就是}不代表结束，所以我们著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】前文提到的}表示语句结束的论断不起作用了【未经授权禁止转载】【原创内容，转载请注明出处】。()内部必须运算完成，才能结束这次表达著作权归作者所有，禁止商业用途转载。【作者：唐霜】式运算，所以上面代码中的红色部分又再次先【本文首发于唐霜的博客】原创内容，盗版必究。运算了，运算完又和()组成了a()，于是【关注微信公众号：wwwtangshuangnet】【本文受版权保护】，函数又执行了。

【作者：唐霜】【未经授权禁止转载】【原创不易，请尊重版权】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

OK，我们现在终于get到了终点：【转载请注明来源】表达式必须运行完成未经授权，禁止复制转载。，才会结束表达式。这简直就是天一样的玄机原创内容，盗版必究。未经授权，禁止复制转载。，牢牢记住表达式这个概念之后，我们再来看著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】下面的几个代码：

!function(){}();
+function(){}();
-function(){}();
~function(){}();
……

没错，上面的!+-~，全部代表表达式，!【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。表示非，~表示按位非。你可以想出全部的表转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net达式符号（当然必须得考虑运行是否合法，比【作者：唐霜】【转载请注明来源】如/0就不合法，分母不能为0），从而实现本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】上面的这个效果。

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】原创内容，盗版必究。

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【作者：唐霜】

遗留问题：第二个括号内的参数【原创不易，请尊重版权】

转载请注明出处：www.tangshuang.net【转载请注明来源】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【作者：唐霜】

在多数插件中，我们可以看到如下的代码：本文作者：唐霜，转载请注明出处。

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【本文受版权保护】原创内容，盗版必究。

!function(){}(jQuery);

基本上我们都看懂了，但是第二个括号内有个原创内容，盗版必究。【作者：唐霜】jQuery代表什么意思呢？

【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshuang.net【未经授权禁止转载】转载请注明出处：www.tangshuang.net

function a(var) {}
a(1);

然后把第二行的a替换为function(【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】var){}，结果就变成了function(var){}(1);

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】

var fun = function(a) {}
fun(jQuery);

就是这样了。但是，jQuery是什么呢？【转载请注明来源】著作权归作者所有，禁止商业用途转载。是一个对象啊！所以下面的代码就来了：

!function($){
  // 在function中，$实际上就是jQuery，所以用$尽情玩耍吧。
}(jQuery);

难道你以为到此就结束了吗？不，看看下面的未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net代码：

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。

!function(fun){}(function($){});

【本文受版权保护】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。

!function(fun){
  "use strict";
  if(typeof define === 'function' && define.amd) {   
    define(['jquery'], fun)
  } else {
    fun((typeof(jQuery) != 'undefined') ? jQuery : window.Zepto) 
  }
}(function($){
  "use strict";
  // 真正的插件代码都在这里
});

这是一个双重传值的过程。第一重，第一个f【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】unction(fun)中的fun是第二【原创内容，转载请注明出处】未经授权，禁止复制转载。个function($)，因此，在第一个原创内容，盗版必究。【作者：唐霜】function中的代码中fun($)和【转载请注明来源】本文作者：唐霜，转载请注明出处。第二个function($)是等效的。第【原创内容，转载请注明出处】【转载请注明来源】二重，第二个function($)中的$【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】参数，是在第一个函数中进行传递过来的，第著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。一个函数中，define([‘【转载请注明来源】【关注微信公众号：wwwtangshuangnet】;jquery’],fun)本文版权归作者所有，未经授权不得转载。【转载请注明来源】和fun(jQeury)实际上在执行第二原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】个函数，既然如此，真正的插件代码就应该在【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】第二个函数中去写，第一个函数仅仅是通过多【转载请注明来源】【原创不易，请尊重版权】个判断，返回正确的调用模式而已。

【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】本文版权归作者所有，未经授权不得转载。

(function(){}).call();

好了，这个问题就阐述到这里，可能也有一些【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】不足的地方，欢迎大家指正。

未经授权，禁止复制转载。【本文受版权保护】【作者：唐霜】转载请注明出处：www.tangshuang.net

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【作者：唐霜】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】原创内容，盗版必究。未经授权，禁止复制转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【转载请注明来源】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【作者：唐霜】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。转载请注明出处：www.tangshuang.net原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。原创内容，盗版必究。【转载请注明来源】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。未经授权，禁止复制转载。【本文受版权保护】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【未经授权禁止转载】

2016-01-20 18444

已有8条评论

123123 2017-11-19 04:02

function(){};\n(1);运行这段代码不会出错吗？

回复
- 否子戈 2017-11-19 15:37
  
  自己试试啊
  
  回复
  - 123 2017-11-19 22:18
    
    试过了，报错。
    
    回复
    - 否子戈 2017-11-20 14:41
      
      js里面function开头的语句会被认为是对一个函数对声明，它不执行具体的动作，因此当作一个声明语句来看待，声明语句意味着要有一个变量作为划分内存的地址的引用，这里报错是因为function(){}这个语句没有给一个变量，所以抛出语法错误。自己多想想就行了。
      
      回复
      - 123 2017-11-20 14:58
        
        你文章说不会报错。语法正确。还是我看错了。
[置顶] JavaScript重构之立即执行函数 | 歪布IT笔记 2016-11-19 16:01

[…] 参考：javascript立即执行某个函数：插件中function(){}()再思考 […]

回复
javascript闭包概念梳理_唐霜 2016-04-16 22:44

[…] 这是一个很奇怪的用法，第一次看到有function()()这样的用法？请阅读这篇文章。当执行add(5)的时候，返回的结果其实是一个函数，而再执行这个函数，需要再传入一个参数，所以就有了add(5)(10)这样的用法。当然，这是一个极端的例子，出现的太早，我们来看下最常见的一种用法吧。 […]

回复
javascript中的function(){}(), new function(), new Function(), Function以及它们中的this|唐霜 2016-03-19 02:15

[…] 在《javascript立即执行某个函数：插件中function(){}()再思考》一文中，我详细阐述了function(){}()的作用及理解思路。这里不再赘述，现在，我们面临的新问题是，知道了它的作用，我们如何使用它？ […]

回复

唐霜

javascript立即执行某个函数：插件中function(){}()再思考

几种方式立即执行函数【本文首发于唐霜的博客】

此处括号的正确理解【访问 www.tangshuang.net 获取更多精彩内容】

匿名函数的立即执行【版权所有，侵权必究】

遗留问题：第二个括号内的参数【原创不易，请尊重版权】

为价值买单，打赏一杯咖啡

声明

关于

生态