国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

淺析Javascript匿名函數與自執行函數

2019-11-20 10:36:52
字體:
來源:轉載
供稿:網友

函數是JavaScript中最靈活的一種對象,這里只是講解其匿名函數的用途。匿名函數:就是沒有函數名的函數。

函數的定義,大致可分為三種方式:

第一種:這也是最常規的一種

function double(x){ return 2 * x; }

第二種:這種方法使用了Function構造函數,把參數列表和函數體都作為字符串,很不方便,不建議使用。

var double = new Function('x', 'return 2 * x;');

第三種:

var double = function(x) { return 2* x; }

注意“=”右邊的函數就是一個匿名函數,創造完畢函數后,又將該函數賦給了變量square。

匿名函數的創建

第一種方式:就是上面所講的定義square函數,這也是最常用的方式之一。

第二種方式:

(function(x, y){ alert(x + y); })(2, 3);

這里創建了一個匿名函數(在第一個括號內),第二個括號用于調用該匿名函數,并傳入參數。括號是表達式,是表達式就有返回值,所以可以在后面加一對括號讓它們執行.

自執行的匿名函數

1. 什么是自執行的匿名函數?

它是指形如這樣的函數: (function {// code})();

2. 疑問

為什么(function {// code})();可以被執行, 而function {// code}();卻會報錯?

3. 分析

(1). 首先, 要清楚兩者的區別:
(function {// code})是表達式, function {// code}是函數聲明.
(2). 其次, js"預編譯"的特點:
js在"預編譯"階段, 會解釋函數聲明, 但卻會忽略表式.
(3). 當js執行到function() {//code}();時, 由于function() {//code}在"預編譯"階段已經被解釋過, js會跳過function(){//code}, 試圖去執行();, 故會報錯;
當js執行到(function {// code})();時, 由于(function {// code})是表達式, js會去對它求解得到返回值, 由于返回值是一 個函數, 故而遇到();時, 便會被執行.

另外, 函數轉換為表達式的方法并不一定要靠分組操作符(),我們還可以用void操作符,~操作符,!操作符……

如:

!function(){ alert("另類的匿名函數自執行"); }();

匿名函數與閉包

閉包的英文單詞是closure,這是JavaScript中非常重要的一部分知識,因為使用閉包可以大大減少我們的代碼量,使我們的代碼看上去更加清晰等等,總之功能十分強大。

閉包的含義:閉包說白了就是函數的嵌套,內層的函數可以使用外層函數的所有變量,即使外層函數已經執行完畢(這點涉及JavaScript作用域鏈)。

function checkClosure(){ var str = 'rain-man'; setTimeout( function(){ alert(str); } //這是一個匿名函數 , 2000); } checkClosure();

這個例子看上去十分的簡單,仔細分析下它的執行過程還是有許多知識點的:checkClosure函數的執行是瞬間的(也許用時只是0.00001毫秒),在checkClosure的函數體內創建了一個變量str,在checkClosure執行完畢之后str并沒有被釋放,這是因為setTimeout內的匿名函數存在這對str的引用。待到2秒后函數體內的匿名函數被執行完畢,str才被釋放。

用閉包來優化代碼:

function forTimeout(x, y){ alert(x + y); } function delay(x , y , time){ setTimeout('forTimeout(' + x + ',' + y + ')' , time); } /** * 上面的delay函數十分難以閱讀,也不容易編寫,但如果使用閉包就可以讓代碼更加清晰 * function delay(x , y , time){ * setTimeout( * function(){ * forTimeout(x , y) * } * , time); * } */

匿名函數最大的用途是創建閉包(這是JavaScript語言的特性之一),并且還可以構建命名空間,以減少全局變量的使用。

var oEvent = {}; (function(){ var addEvent = function(){ /*代碼的實現省略了*/ }; function removeEvent(){} oEvent.addEvent = addEvent; oEvent.removeEvent = removeEvent; })();

在這段代碼中函數addEvent和removeEvent都是局部變量,但我們可以通過全局變量oEvent使用它,這就大大減少了全局變量的使用,增強了網頁的安全性。

我們要想使用此段代碼:

oEvent.addEvent(document.getElementById('box') , 'click' , function(){});var rainman = (function(x , y){ return x + y; })(2 , 3); /** * 也可以寫成下面的形式,因為第一個括號只是幫助我們閱讀,但是不推薦使用下面這種書寫格式。 * var rainman = function(x , y){ * return x + y; * }(2 , 3);

在這里我們創建了一個變量rainman,并通過直接調用匿名函數初始化為5,這種小技巧有時十分實用。

var outer = null; (function(){ var one = 1; function inner (){ one += 1; alert(one); } outer = inner; })(); outer(); //2 outer(); //3 outer(); //4

這段代碼中的變量one是一個局部變量(因為它被定義在一個函數之內),因此外部是不可以訪問的。但是這里我們創建了inner函數,inner函數是可以訪問變量one的;又將全局變量outer引用了inner,所以三次調用outer會彈出遞增的結果。

注意

1 閉包允許內層函數引用父函數中的變量,但是該變量是最終值

/** * <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); }; }

你會發現當鼠標移過每一個<li>元素時,總是彈出4,而不是我們期待的元素下標。這是為什么呢?注意事項里已經講了(最終值)。顯然這種解釋過于簡單,當mouseover事件調用監聽函數時,首先在匿名函數( function(){ alert(i); })內部查找是否定義了 i,結果是沒有定義;因此它會向上查找,查找結果是已經定義了,并且i的值是4(循環后的i值);所以,最終每次彈出的都是4。

解決方法一:

var lists = document.getElementsByTagName('li'); for(var i = 0 , len = lists.length ; i < len ; i++){ (function(index){ lists[ index ].onmouseover = function(){ alert(index); }; })(i); }

解決方法二:

var lists = document.getElementsByTagName('li'); for(var i = 0, len = lists.length; i < len; i++){ lists[ i ].$$index = i; //通過在Dom元素上綁定$$index屬性記錄下標 lists[ i ].onmouseover = function(){ alert(this.$$index); }; }

解決方法三:

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 內存泄露

使用閉包十分容易造成瀏覽器的內存泄露,嚴重情況下會是瀏覽器掛死

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 辽中县| 汉阴县| 庆城县| 阿荣旗| 双峰县| 扎兰屯市| 胶南市| 谢通门县| 南充市| 罗源县| 祁阳县| 左贡县| 桐庐县| 荥经县| 天柱县| 祁门县| 湘潭县| 瑞丽市| 濮阳县| 扎赉特旗| 定南县| 周宁县| 浦城县| 墨玉县| 永平县| 卢龙县| 潜山县| 江西省| 莱芜市| 乾安县| 绥化市| 宝山区| 沽源县| 马龙县| 九寨沟县| 桑日县| 南昌市| 延安市| 云梦县| 蓝山县| 当阳市|