几种方式立即执行函数未经授权,禁止复制转载。
本文作者:唐霜,转载请注明出处。【转载请注明来源】转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。在javascript中定义一个函数,并【版权所有,侵权必究】【本文首发于唐霜的博客】且立即去执行它。(这个情况虽然看上去很疯【关注微信公众号:wwwtangshuangnet】【转载请注明来源】狂,但是实际上一定会用到,因为函数一旦执【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。行完,内部的局部变量会被释放,内存也释放未经授权,禁止复制转载。【转载请注明来源】出来。)我们可能第一种想到的方法是:
本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】【本文受版权保护】【未经授权禁止转载】// 第一种
function a() {}
a();
没错,这个太简单不过了。著作权归作者所有,禁止商业用途转载。
【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】当然,还有另外一种相对高深的办法:原创内容,盗版必究。
【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】【作者:唐霜】window.onload = function() {}
这段代码表示在网页加载完之后立即执行fu【版权所有】唐霜 www.tangshuang.net【作者:唐霜】nction中的代码,但这里面隐含了另外【本文首发于唐霜的博客】【未经授权禁止转载】一层意思,也就是可以把函数赋值给变量,使【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。变量成为一个其他语言意义上的类。
原创内容,盗版必究。本文作者:唐霜,转载请注明出处。【未经授权禁止转载】【本文受版权保护】原创内容,盗版必究。// 第二种
var a = function(){}a();
不过这也给了我们另外一个思路:未经授权,禁止复制转载。
【转载请注明来源】【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。原创内容,盗版必究。function fun() {}
var a = fun();
a();
给我们留下一个思考:【版权所有,侵权必究】
原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。【版权所有,侵权必究】【版权所有,侵权必究】function(){}; // javascript语句中以function开始没有实际的效果
一旦某条语句以function开始,这条【转载请注明来源】本文版权归作者所有,未经授权不得转载。语句没办法赋值给某个变量去执行它(说到这【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net里,函数名可以可以理解为一个被赋值为某个未经授权,禁止复制转载。【转载请注明来源】函数的变量而已)。
本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】下面是真相的时候:【访问 www.tangshuang.net 获取更多精彩内容】
本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】function a() {}
a();
如果函数名是一个被赋值的变量(也就是a)【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net,那么为何不将其实际的值替换掉变量名呢(【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】也就是把a()替换为function()【作者:唐霜】【转载请注明来源】())?于是,上面这段代码变为:
转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】function(){}(); // 前面加粗部分代表a
但是在前面已经提到了,function开【本文受版权保护】本文作者:唐霜,转载请注明出处。始的语句没有实际的效果,因此,上面这个语原创内容,盗版必究。【本文受版权保护】句不会有实际效果。不仅如此,这句代码还会【作者:唐霜】【未经授权禁止转载】抛出错误提示:SyntaxError: Unexpected token。【作者:唐霜】
此处括号的正确理解【本文首发于唐霜的博客】
原创内容,盗版必究。【原创不易,请尊重版权】【原创不易,请尊重版权】造成上述这个异常的原因是,javascr本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。ipt对语句的结束并不是以;作为标识,在【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】这种普通情况下,}被作为语句结束的标识,【未经授权禁止转载】原创内容,盗版必究。因此,上述语句被解释为:
原创内容,盗版必究。【作者:唐霜】原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】function(){};();
因此在执行()时,会抛出表达式错误。而如【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】果我们执行:
【原创不易,请尊重版权】【未经授权禁止转载】【版权所有,侵权必究】【作者:唐霜】function(){};(1);
则不会出错。原因在于:语法正确。【版权所有,侵权必究】
【本文首发于唐霜的博客】【转载请注明来源】【本文受版权保护】原创内容,盗版必究。原创内容,盗版必究。我理解的(),在javascript中有本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。两种:一种是确定优先级,另一种是分组。当【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】然,在声明函数和函数使用的时候也会用到(【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net),但这是一种语法,而不是运算。确定优先【本文首发于唐霜的博客】【本文受版权保护】级就是括号内的表达式先于括号外的表达式运未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。算,例如:
【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】1+(2*5)和(1+2)*5或(1+2)*(2+3)
而分组一般是在正则表达式中使用的概念,例【转载请注明来源】本文版权归作者所有,未经授权不得转载。如:
【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。/<(.*)ok(this) is myhouse(.*)>/
在进行匹配的时候,上面的小括号将匹配结果【本文受版权保护】著作权归作者所有,禁止商业用途转载。分为三组进行返回,在替换的时候,可以对每本文作者:唐霜,转载请注明出处。原创内容,盗版必究。个组分别进行替换。因此,分组的概念,应该本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。和本文没有关系。因此,本文中的(),只有【未经授权禁止转载】【版权所有,侵权必究】两种理解,一种是运算符,一种是语法。
原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net【未经授权禁止转载】在上面的代码中【版权所有,侵权必究】(1);中的【原创内容,转载请注明出处】();很明显是一个运算符,括号内必须有表达式,【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net否则就是语法错误。
我们在回到上面的代码,如果我们给func【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】tion加上()会怎样?
原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】【本文首发于唐霜的博客】(function(){});
恭喜你,你的函数初始化,虽然从结果上并没本文作者:唐霜,转载请注明出处。【作者:唐霜】有什么卵用,而且和直接function(本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】){}也没有什么不同,只不过是把func原创内容,盗版必究。【作者:唐霜】tion(){}提高了运算的优先级而已。
本文版权归作者所有,未经授权不得转载。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】可是,当我们执行下面的代码的时候,情况就【本文受版权保护】转载请注明出处:www.tangshuang.net大不相同了:
著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。(function(){})();
代码是从左往右执行的,就像未经授权,禁止复制转载。a() || b();一样如果a()为真,就不执行b()了。同本文版权归作者所有,未经授权不得转载。【本文受版权保护】样的道理,上面的代码中,红色部分作为一个【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】表达式,执行完毕,代表着一个函数已经初始本文版权归作者所有,未经授权不得转载。【本文受版权保护】化完毕,如果我们回到:function(){}【原创不易,请尊重版权】();,也就是前文抛出错误的那个语句你就【作者:唐霜】著作权归作者所有,禁止商业用途转载。会发现,神奇的事情发生了,红色部分俨然就【原创内容,转载请注明出处】原创内容,盗版必究。是我们要的a,所以整个语句合起来也就是:a();,就这样,函数被执行了。【转载请注明来源】
在这条代码中,第二个()不再是运算符,而【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】是函数的括号。而第一个(),则是一个运算未经授权,禁止复制转载。【本文首发于唐霜的博客】符,提高了内部function的运算优先【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。级,内部被优先执行,得到结果后,与第二个原创内容,盗版必究。【原创不易,请尊重版权】()构成函数语法,执行了函数。
【版权所有,侵权必究】未经授权,禁止复制转载。【版权所有,侵权必究】【作者:唐霜】【作者:唐霜】我们再回头来看()运算符的作用,来看一下【转载请注明来源】【关注微信公众号:wwwtangshuangnet】下面这个代码:
本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。原创内容,盗版必究。【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。()();
这是一个神奇的代码,世界上不会有任何程序著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。员这样去用,当然,它也会报错。但是我们如【作者:唐霜】未经授权,禁止复制转载。何正确去理解这种情况呢?世界上是否存在下本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net面这种javascript代码:
【转载请注明来源】转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net(a+b)(c+d);
从来没有见过。如果世界上存在一种运算,就【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。是没有任何运算,那么上面是成立的,但是,【未经授权禁止转载】【作者:唐霜】如果这种假设不成立的话,上面的代码就是错著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】误的。我们从来没有见过(1+2)(3+4【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】),虽然我们小学的时候写过这样的算式,但【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。是在代码中是不存在的。
【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。因此,我们换一个思维,不要只把它当做运算本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。,而是运算和函数的结合呢?在你的浏览器中原创内容,盗版必究。本文作者:唐霜,转载请注明出处。运行下面这段代码试试:
【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】原创内容,盗版必究。【本文首发于唐霜的博客】【本文受版权保护】(1+2)(3+4);// TypeError: (1 + 2) is not a function
提示的不是语法错误,而是数据类型错误,第本文版权归作者所有,未经授权不得转载。【本文受版权保护】二个括号 前面的不是一个函数。也就是说,本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。第二个括号前面的,如果是函数类型,就正确转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。了!那么世界上有没有一种算法,使运算后返未经授权,禁止复制转载。【作者:唐霜】回值为函数呢?比如 fun1+fun2=【本文首发于唐霜的博客】【未经授权禁止转载】fun3?好像我还从来没有遇到过,因此,【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】想在第一个括号中构建一种运算使该代码成立【原创内容,转载请注明出处】【版权所有,侵权必究】,还需要高高手来实现。唯一的解决办法,就【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。是在 第一个括号中委以函数,也就是(fu原创内容,盗版必究。【本文受版权保护】nction(){})(3+4),而3+【版权所有】唐霜 www.tangshuang.net【本文受版权保护】4不过仅仅是作为前面这个函数的参数予以运著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】行。
转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。原创内容,盗版必究。匿名函数的立即执行著作权归作者所有,禁止商业用途转载。
著作权归作者所有,禁止商业用途转载。【本文受版权保护】本文作者:唐霜,转载请注明出处。当你以为挖到宝藏的时候,下面的解释或许让【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】你再一次开了脑洞。我们提到functio著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。n开头的语句虽然初始化函数,但是函数并不本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】被执行,其运行效果相当于什么也没发生。
【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net【转载请注明来源】原创内容,盗版必究。为了提交它的优先级,我们再用一次()吧:
【关注微信公众号:wwwtangshuangnet】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net(function(){}());
这次,我们直接把函数表达式和后面的()放【版权所有,侵权必究】【版权所有,侵权必究】在一个()里面,这下子奇迹也发生了,空号转载请注明出处:www.tangshuang.net【未经授权禁止转载】内部是一个表达式【作者:唐霜】,表达式的意思就是}不代表结束,所以我们【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】前文提到的}表示语句结束的论断不起作用了未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。。()内部必须运算完成,才能结束这次表达【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net式运算,所以上面代码中的红色部分又再次先【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。运算了,运算完又和()组成了a(),于是原创内容,盗版必究。【未经授权禁止转载】,函数又执行了。
【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】OK,我们现在终于get到了终点:【版权所有,侵权必究】表达式必须运行完成【未经授权禁止转载】,才会结束表达式。这简直就是天一样的玄机未经授权,禁止复制转载。【本文受版权保护】,牢牢记住表达式这个概念之后,我们再来看【原创不易,请尊重版权】【转载请注明来源】下面的几个代码:
【本文首发于唐霜的博客】【本文受版权保护】原创内容,盗版必究。本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。!function(){}();
+function(){}();
-function(){}();
~function(){}();
……
没错,上面的!+-~,全部代表表达式,!【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】表示非,~表示按位非。你可以想出全部的表【本文受版权保护】【原创内容,转载请注明出处】达式符号(当然必须得考虑运行是否合法,比【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】如/0就不合法,分母不能为0),从而实现【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net上面的这个效果。
【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。【转载请注明来源】于是,我们看到几乎所有的插件,都会用上面【本文受版权保护】本文版权归作者所有,未经授权不得转载。的其中一种方式来定义整个代码。
【本文受版权保护】原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。【转载请注明来源】【本文受版权保护】正是因为这个原因,上面的所有代码,都可以【未经授权禁止转载】转载请注明出处:www.tangshuang.net让function(){}内部的代码立即著作权归作者所有,禁止商业用途转载。【转载请注明来源】执行。
【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【本文受版权保护】遗留问题:第二个括号内的参数本文作者:唐霜,转载请注明出处。
【本文受版权保护】原创内容,盗版必究。【版权所有,侵权必究】未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。在多数插件中,我们可以看到如下的代码:本文版权归作者所有,未经授权不得转载。
【本文首发于唐霜的博客】【本文受版权保护】【转载请注明来源】【转载请注明来源】本文版权归作者所有,未经授权不得转载。!function(){}(jQuery);
基本上我们都看懂了,但是第二个括号内有个本文作者:唐霜,转载请注明出处。【未经授权禁止转载】jQuery代表什么意思呢?
【本文受版权保护】本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。你想一下下面这个用法:本文版权归作者所有,未经授权不得转载。
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】function a(var) {}
a(1);
然后把第二行的a替换为function(【原创内容,转载请注明出处】【未经授权禁止转载】var){},结果就变成了function(var){}(1);
没错,第二个括号内的值,是原本函数的特定【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】参数。所以,上面那个jQuery的,我们【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】可以将它还原为:
原创内容,盗版必究。【转载请注明来源】本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。var fun = function(a) {}
fun(jQuery);
就是这样了。但是,jQuery是什么呢?【本文受版权保护】本文版权归作者所有,未经授权不得转载。是一个对象啊!所以下面的代码就来了:
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】!function($){
// 在function中,$实际上就是jQuery,所以用$尽情玩耍吧。
}(jQuery);
难道你以为到此就结束了吗?不,看看下面的未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】代码:
著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】【原创不易,请尊重版权】!function(fun){}(function($){});
什么鬼?你以为我想表达什么?其实,这是很转载请注明出处:www.tangshuang.net【版权所有,侵权必究】多插件中的一种写法,用以兼容不同的加载模转载请注明出处:www.tangshuang.net原创内容,盗版必究。式(CommonJS、CMD、CMD),本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。具体是这样的:
【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。【作者:唐霜】!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【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。unction(fun)中的fun是第二【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net个function($),因此,在第一个本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】function中的代码中fun($)和【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。第二个function($)是等效的。第【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。二重,第二个function($)中的$本文版权归作者所有,未经授权不得转载。【转载请注明来源】参数,是在第一个函数中进行传递过来的,第【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net一个函数中,define([‘【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。;jquery’],fun)未经授权,禁止复制转载。【版权所有,侵权必究】和fun(jQeury)实际上在执行第二【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】个函数,既然如此,真正的插件代码就应该在原创内容,盗版必究。【原创内容,转载请注明出处】第二个函数中去写,第一个函数仅仅是通过多【原创内容,转载请注明出处】【版权所有,侵权必究】个判断,返回正确的调用模式而已。
著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】实际上,了解了上述之后,本文的题目是为了【转载请注明来源】【转载请注明来源】立即执行某个函数,在实践中,还有很多做法【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】可以在申请一个函数后立即执行它,比如:
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。(function(){}).call();
好了,这个问题就阐述到这里,可能也有一些未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。不足的地方,欢迎大家指正。
本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】转载请注明出处:www.tangshuang.net2016-01-20 18445



function(){};\n(1);运行这段代码不会出错吗?
自己试试啊
试过了,报错。
js里面function开头的语句会被认为是对一个函数对声明,它不执行具体的动作,因此当作一个声明语句来看待,声明语句意味着要有一个变量作为划分内存的地址的引用,这里报错是因为function(){}这个语句没有给一个变量,所以抛出语法错误。自己多想想就行了。
你文章说不会报错。语法正确。还是我看错了。
[…] 参考:javascript立即执行某个函数:插件中function(){}()再思考 […]
[…] 这是一个很奇怪的用法,第一次看到有function()()这样的用法?请阅读这篇文章。当执行add(5)的时候,返回的结果其实是一个函数,而再执行这个函数,需要再传入一个参数,所以就有了add(5)(10)这样的用法。当然,这是一个极端的例子,出现的太早,我们来看下最常见的一种用法吧。 […]
[…] 在《javascript立即执行某个函数:插件中function(){}()再思考》一文中,我详细阐述了function(){}()的作用及理解思路。这里不再赘述,现在,我们面临的新问题是,知道了它的作用,我们如何使用它? […]