Javascript的匿名函数与自执行
函數(shù)是JavaScript中最靈活的一種對象，這里只是講解其匿名函數(shù)的用途。匿名函數(shù)：就是沒有函數(shù)名的函數(shù)。
?
函數(shù)的定義，大致可分為三種方式：
第一種：這也是最常規(guī)的一種
| 1 2 3 | function double(x){??? ????return 2 * x;?????? } |
第二種：這種方法使用了Function構(gòu)造函數(shù)，把參數(shù)列表和函數(shù)體都作為字符串，很不方便，不建議使用。
| 1 | var double = new Function('x', 'return 2 * x;'); |
第三種：
| 1 | var double = function(x) { return 2* x; } |
注意“=”右邊的函數(shù)就是一個(gè)匿名函數(shù)，創(chuàng)造完畢函數(shù)后，又將該函數(shù)賦給了變量square。
?
?
匿名函數(shù)的創(chuàng)建
?
第一種方式：就是上面所講的定義square函數(shù)，這也是最常用的方式之一。
第二種方式：
| 1 2 3 | (function(x, y){?? ????alert(x + y);???? })(2, 3); |
這里創(chuàng)建了一個(gè)匿名函數(shù)(在第一個(gè)括號內(nèi))，第二個(gè)括號用于調(diào)用該匿名函數(shù)，并傳入?yún)?shù)。括號是表達(dá)式，是表達(dá)式就有返回值，所以可以在后面加一對括號讓它們執(zhí)行.
?
?
自執(zhí)行的匿名函數(shù)
?
????1. 什么是自執(zhí)行的匿名函數(shù)?
????它是指形如這樣的函數(shù): (function {// code})();
????2. 疑問
????為什么(function {// code})();可以被執(zhí)行, 而function {// code}();卻會報(bào)錯(cuò)?
????3. 分析
????(1). 首先, 要清楚兩者的區(qū)別:
????(function {// code})是表達(dá)式, function {// code}是函數(shù)聲明.
????(2). 其次, js"預(yù)編譯"的特點(diǎn):
????js在"預(yù)編譯"階段, 會解釋函數(shù)聲明, 但卻會忽略表式.
????(3). 當(dāng)js執(zhí)行到function() {//code}();時(shí), 由于function() {//code}在"預(yù)編譯"階段已經(jīng)被解釋過, js會跳過function(){//code}, 試圖去執(zhí)行();, 故會報(bào)錯(cuò);
????當(dāng)js執(zhí)行到(function {// code})();時(shí), 由于(function {// code})是表達(dá)式, js會去對它求解得到返回值, 由于返回值是一 個(gè)函數(shù), 故而遇到();時(shí), 便會被執(zhí)行.
???另外，?函數(shù)轉(zhuǎn)換為表達(dá)式的方法并不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……
如：
| 1 2 3 | !function(){?? ??alert("另類的匿名函數(shù)自執(zhí)行");?? }(); |
?
?
匿名函數(shù)與閉包
?
閉包的英文單詞是closure，這是JavaScript中非常重要的一部分知識，因?yàn)槭褂瞄]包可以大大減少我們的代碼量，使我們的代碼看上去更加清晰等等，總之功能十分強(qiáng)大。
閉包的含義：閉包說白了就是函數(shù)的嵌套，內(nèi)層的函數(shù)可以使用外層函數(shù)的所有變量，即使外層函數(shù)已經(jīng)執(zhí)行完畢（這點(diǎn)涉及JavaScript作用域鏈）。
| 1 2 3 4 5 6 7 | function checkClosure(){? ????var str = 'rain-man';? ????setTimeout(? ????????function(){ alert(str); } //這是一個(gè)匿名函數(shù)? ????, 2000);? }? checkClosure(); |
這個(gè)例子看上去十分的簡單，仔細(xì)分析下它的執(zhí)行過程還是有許多知識點(diǎn)的：checkClosure函數(shù)的執(zhí)行是瞬間的（也許用時(shí)只是0.00001毫秒），在checkClosure的函數(shù)體內(nèi)創(chuàng)建了一個(gè)變量str，在checkClosure執(zhí)行完畢之后str并沒有被釋放，這是因?yàn)閟etTimeout內(nèi)的匿名函數(shù)存在這對str的引用。待到2秒后函數(shù)體內(nèi)的匿名函數(shù)被執(zhí)行完畢,str才被釋放。
?
用閉包來優(yōu)化代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function forTimeout(x, y){? ????alert(x + y);? }? function delay(x , y? , time){? ????setTimeout('forTimeout(' +? x + ',' +? y + ')' , time);????? }? /**? ?* 上面的delay函數(shù)十分難以閱讀，也不容易編寫，但如果使用閉包就可以讓代碼更加清晰? ?* function delay(x , y , time){? ?*???? setTimeout(? ?*???????? function(){? ?*???????????? forTimeout(x , y)?? ?*???????? }??????????? ?*???? , time);???? ?* }? ?*/ |
匿名函數(shù)最大的用途是創(chuàng)建閉包（這是JavaScript語言的特性之一），并且還可以構(gòu)建命名空間，以減少全局變量的使用。
?
| 1 2 3 4 5 6 7 8 | var oEvent = {};? (function(){?? ????var addEvent = function(){ /*代碼的實(shí)現(xiàn)省略了*/ };? ????function removeEvent(){}? ????? ????oEvent.addEvent = addEvent;? ????oEvent.removeEvent = removeEvent;? })(); |
在這段代碼中函數(shù)addEvent和removeEvent都是局部變量，但我們可以通過全局變量oEvent使用它，這就大大減少了全局變量的使用，增強(qiáng)了網(wǎng)頁的安全性。 我們要想使用此段代碼：oEvent.addEvent(document.getElementById('box') , 'click' , function(){});
?
| 1 2 3 4 5 6 7 8 | var rainman = (function(x , y){? ????return x + y;? })(2 , 3);? /**? ?* 也可以寫成下面的形式，因?yàn)榈谝粋€(gè)括號只是幫助我們閱讀，但是不推薦使用下面這種書寫格式。? ?* var rainman = function(x , y){? ?*??? return x + y;? ?* }(2 , 3); |
在這里我們創(chuàng)建了一個(gè)變量rainman，并通過直接調(diào)用匿名函數(shù)初始化為5，這種小技巧有時(shí)十分實(shí)用。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var outer = null;? ????? (function(){? ????var one = 1;? ????function inner (){? ????????one += 1;? ????????alert(one);? ????}? ????outer = inner;? })();? ????? outer();??? //2? outer();??? //3? outer();??? //4 |
這段代碼中的變量one是一個(gè)局部變量（因?yàn)樗欢x在一個(gè)函數(shù)之內(nèi)），因此外部是不可以訪問的。但是這里我們創(chuàng)建了inner函數(shù)，inner函數(shù)是可以訪問變量one的；又將全局變量outer引用了inner，所以三次調(diào)用outer會彈出遞增的結(jié)果。
?
?
注意
?
1 閉包允許內(nèi)層函數(shù)引用父函數(shù)中的變量，但是該變量是最終值
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /**? ?* <body>? ?* <ul>? ?*???? <li>one</li>? ?*???? <li>two</li>? ?*???? <li>three</li>? ?*???? <li>one</li>? ?* </ul>? ?*/ ????? var lists = document.getElementsByTagName('li');? for(var i = 0 , len = lists.length ; i < len ; i++){? ????lists[ i ].onmouseover = function(){? ????????alert(i);????? ????};? } |
你會發(fā)現(xiàn)當(dāng)鼠標(biāo)移過每一個(gè)<li>元素時(shí)，總是彈出4，而不是我們期待的元素下標(biāo)。這是為什么呢？注意事項(xiàng)里已經(jīng)講了（最終值）。顯然這種解釋過于簡單，當(dāng)mouseover事件調(diào)用監(jiān)聽函數(shù)時(shí)，首先在匿名函數(shù)（ function(){ alert(i); }）內(nèi)部查找是否定義了 i，結(jié)果是沒有定義；因此它會向上查找，查找結(jié)果是已經(jīng)定義了，并且i的值是4（循環(huán)后的i值）；所以，最終每次彈出的都是4。
解決方法一：
| 1 2 3 4 5 6 7 8 | var lists = document.getElementsByTagName('li');? for(var i = 0 , len = lists.length ; i < len ; i++){? ????(function(index){? ????????lists[ index ].onmouseover = function(){? ????????????alert(index);????? ????????};????????????????????? ????})(i);? } |
解決方法二：
| 1 2 3 4 5 6 7 | var lists = document.getElementsByTagName('li');? for(var i = 0, len = lists.length; i < len; i++){? ????lists[ i ].$$index = i;??? //通過在Dom元素上綁定$$index屬性記錄下標(biāo)? ????lists[ i ].onmouseover = function(){? ????????alert(this.$$index);????? ????};? } |
解決方法三：
| 1 2 3 4 5 6 7 8 9 | function eventListener(list, index){? ????list.onmouseover = function(){? ????????alert(index);? ????};? }? var lists = document.getElementsByTagName('li');? for(var i = 0 , len = lists.length ; i < len ; i++){? ????eventListener(lists[ i ] , i);? } |
2 內(nèi)存泄露
使用閉包十分容易造成瀏覽器的內(nèi)存泄露，嚴(yán)重情況下會是瀏覽器掛死
轉(zhuǎn)載于:https://www.cnblogs.com/mrxia/p/3595964.html
總結(jié)
以上是生活随笔為你收集整理的Javascript的匿名函数与自执行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： “代理”那点事儿-使用代理和搭建简单代理
- 下一篇： Oracle 11g RAC ASM 错