所謂“閉包”,指的是一個擁有許多變數和綁定了這些變數的環境的表達式(通常是一個函數),因而這些變數也是該表達式的一部分。
關於閉包,最簡單的描述就是 ECMAScript 允許使用內部函數-也就是函數定義和函數表達式位於另一個函數的函數體內。而且,這些內部函數可以存取它們所在的外部函數中聲明的所有局部變數、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被呼叫時,就會形成閉包。也就是說,內部函數會在外部函數返回後執行。而當這個內部函數執行時,它仍然必需地存取其外部函數的局部變數、參數以及其他內部函數。這些局部變數、參數和函數宣告(最初時)的值是外部函數傳回時的值,但也會受到內部函數的影響。
簡而言之,閉包的作用就是在out function執行完並返回後,閉包使得Javascript的垃圾回收機制GC不會收回out function所佔用的資源,因為out function的內部函數inner function的執行需要依賴out function中的變數。
閉包的兩個特點:
1、作為一個函數變數的一個引用 - 當函數返回時,其處於激活狀態。
2、一個閉包就是當一個函數回傳時,一個沒有釋放資源的堆疊區。
範例1:
<script type="text/javascript"> function setupSomeGlobals() { // Local variable that ends up within closure var num = 666; // Store some references to functions as global variables gAlertNumber = function() { alert(num); } gIncreaseNumber = function() { num++; } gSetNumber = function(x) { num = x; } } </script> <button onclick="setupSomeGlobals()">生成 - setupSomeGlobals()</button> <button onclick="gAlertNumber()">输出值 - gAlertNumber()</button> <button onclick="gIncreaseNumber()">增加 - gIncreaseNumber()</button> <button onclick="gSetNumber(5)">赋值5 - gSetNumber(5)</button>
範例2:
<script type="text/javascript"> function newClosure(someNum, someRef) { // Local variables that end up within closure var num = someNum; var anArray = [1,2,3]; var ref = someRef; return function(x) { num += x; anArray.push(num); alert('num: ' + num + ' nanArray ' + anArray.toString() + ' nref.someVar ' + ref.someVar); } } var closure1 = newClosure(40, {someVar:' never-online'}) var closure2 = newClosure(99, {someVar:' BlueDestiny'}) closure1(4) closure2(3) </script>
範例3:
<script language="javascript"> /* 声明一个全局变量 - getImgInPositionedDivHtml - 并将一次调用一个外部函数表达式返回的内部函数赋给它。 这个内部函数会返回一个用于表示绝对定位的 DIV 元素包围着一个 IMG 元素 的 HTML 字符串,这样一来, 所有可变的属性值都由调用该函数时的参数提供: */ var getImgInPositionedDivHtml = (function(){ /* 外部函数表达式的局部变量 - buffAr - 保存着缓冲数组。这个数组只会被创建一次,生成的数组实例对内部函数而言永远是可用的 因此,可供每次调用这个内部函数时使用。 其中的空字符串用作数据占位符,相应的数据 将由内部函数插入到这个数组中: */ var buffAr = [ '<div id="', '', //index 1, DIV ID 属性 '" style="position:absolute;top:', '', //index 3, DIV 顶部位置 'px;left:', '', //index 5, DIV 左端位置 'px;width:', '', //index 7, DIV 宽度 'px;height:', '', //index 9, DIV 高度 'px;overflow:hidden;\"><img src=\"', '', //index 11, IMG URL '\" width=\"', '', //index 13, IMG 宽度 '\" height=\"', '', //index 15, IMG 调蓄 '\" alt=\"', '', //index 17, IMG alt 文本内容 '\"><\/div>' ]; /* 返回作为对函数表达式求值后结果的内部函数对象。 这个内部函数就是每次调用执行的函数 - getImgInPositionedDivHtml( ... ) - */ return (function(url, id, width, height, top, left, altText){ /* 将不同的参数插入到缓冲数组相应的位置: */ buffAr[1] = id; buffAr[3] = top; buffAr[5] = left; buffAr[13] = (buffAr[7] = width); buffAr[15] = (buffAr[9] = height); buffAr[11] = url; buffAr[17] = altText; /* 返回通过使用空字符串(相当于将数组元素连接起来) 连接数组每个元素后形成的字符串: */ return buffAr.join(''); }); //:内部函数表达式结束。 })();//自调用 alert(getImgInPositionedDivHtml);//显示返回的函数 alert(getImgInPositionedDivHtml("img.gif","img",100,50,0,0,"Test")); </script>
說明:其中的關鍵技巧在於執行一個單行(in-line)函數表達式建立一個額外的執行環境,而將該函數表達式傳回的內部函數作為在外部程式碼中使用的函數。此時,緩衝數組被定義為函數表達式的局部變數。這個函數表達式只需執行一次,而陣列只需建立一次,就可以供依賴它的函數重複使用。
以上是javascript的閉包是什麼? javascript閉包如何使用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!