2015年11月17日 JavaScript Coding 浏览(237) 收藏

什么是javascript的匿名函数自调用?

什么是javascript的自函数?它们的执行含义是怎样的?请看下面一些由浅入深的案例。


首先,这里我们声明了一个函数foo,然后执行了foo()函数。


var foo = function(){};
foo();


那么,自函数又是如何调用的呢?是自己调自己吗?那不是叫递归了吗?,例如:


var foo = function(){
    foo();
};


给大家开了个死循环的玩笑,接下来回归正题。大家看看如下代码:


var foo = function(){};
foo();
// 上面代码是否等同于下面代码?
function(){}();


这里通过验证,我们发现foo();执行正确。而function(){}()这种写法存在语法错误。


ok,我们再换一种写法,请看下面:


(function(){alert(1);})();


那么,上述写法是否可执行呢?答:是。


其实,这并不难理解,因为我们将function(){}()代码段中的function(){}用括号( )括起来了。

这样这段语句就有点类似于:foo();的调用方式。其中,foo等同于(function(){})。

哈哈,这下该懂了吧?细看,这是不是有点像匿名函数的自调用?


Go! 我们继续看看平时的一些javascript代码,有哪些应用使用了这种调用方式。

QQ图片20151117231720.png


这里,假设在引用了jquery类库的页面包含一个隐藏文本域:id="id"  value="随意值" 。

在如下代码中,我们将alert这个域的值。


(function($){
    alert($('#id').val());
})(jQuery);


这段常见的jquery插件使用的代码方式是不是很高大上?实际它等同于:


function myFun($) {
    alert($('#id').val());
}

myFun(jQuery);


这下大家明白了吧?

不妨试试下面的代码的执行情况,这样大家就会更加印象深刻了。


(function(x){
    alert(x('#id').val());
})(jQuery);


另外,给大家点提示:

在jquery源码中,jQuery的实例化方式如下:


var jQuery = window.jQuery = window.$ = function (selector, context) {
    return new jQuery.fn.init(selector, context);
};


这些大家明白,为什么最后传的入参偏偏是jQuery了吧?

赞一下 0 人赞了本文