源码解析~匿名函数(function(){})();

Awara 2018-09-03

【前言】

      研究过Javascript代码库的人,会看到很多如下形式的函数: (function(){...}()) 或 (function(){})()

      接下来简单总结概括下匿名函数相关知识点。

【主体】

(1)匿名函数:

      (function(){})是一个标准的函数定义,但是没有赋值给任何变量。所以是没有名字的函数,叫匿名函数。没有名字就无法像普通函数那样随时随地调用了,所以在他定义完成后就马上调用他,后面的括号()是运行这个函数的意思。

(2)案例解析:

      所以上面可以解释成为“匿名函数自调用”,也就是说,定义一个匿名函数,然后马上调用它(因为它是匿名的,如果不立即调用就获取不到该函数的引用了)。

(3)应用:

      通常它被应用在一些大型的JS框架中(如上面所说的),因为这个匿名函数的函数体相当于提供一个匿名的名字空间,这样就不会再与用户自定义的JS函数、变量、对象发生冲突了。尽管JS没有显示地提供命名空间的定义和使用机制,但这种匿名方式却不失为是一种很好的解决命名空间问题的方法。

      匿名函数:

(function(){...})(jQuery);

      常用于存放开发插件的代码,执行其中代码时DOM不一定存在,所以直接自动执行DOM操作的代码要小心使用。开发插件的格式如下:

(function ($) {
        $.fn.test111 = function () {
            alert('test')
        }
})(jQuery);

      调用插件:

$("#elementid").test111();

      匿名函数 function(arg){...} 为匿名函数,参数为arg。调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即: (function(arg){...})(param) 这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数 

      而(function($){...})(jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery。等同于 var fn = function($){....}; fn(jQuery); 

(funtion(){})();立即执行函数;相当于先申明一个函数,声明完后直接调用; 

相当于:

      (funtion(str){alert(str)})("output"));相当于:funtion OutPutFun(str){alert(str);};OutPutFun("output");

(4)通俗理解:

      可以理解为一种闭包,把jQuery作为实参传入到形参为$的匿名函数里面。其写法相当于

function Test(t){
    alert(t);
}//定义函数
Test("Hello World!");//执行函数
    等价于
(function(t){alert(t);})("Hello World!");

    一般写插件时避免变量全局污染,就用此方式写。

      

.

相关推荐