亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

JavaScript 閉包

什麼是閉包

?閉包,官方對閉包的解釋是:一個擁有許多變數(shù)和綁定了這些變數(shù)的環(huán)境的表達(dá)式(通常是一個函數(shù)),因而這些變數(shù)也是該表達(dá)式的一部分。閉包的特點:

  1. 作為一個函數(shù)變數(shù)的一個引用,當(dāng)函數(shù)返回時,其處於激活狀態(tài)。

  2. 一個閉包就是當(dāng)一個函數(shù)回傳時,一個沒有釋放資源的堆疊區(qū)。

  簡單的說,Javascript允許使用內(nèi)部函數(shù)---即函數(shù)定義和函數(shù)表達(dá)式位於另一個函數(shù)的函數(shù)體內(nèi)。而且,這些內(nèi)部函數(shù)可以存取它們所在的外部函數(shù)中聲明的所有局部變數(shù)、參數(shù)和聲明的其他內(nèi)部函數(shù)。當(dāng)其中一個這樣的內(nèi)部函數(shù)在包含它們的外部函數(shù)之外被呼叫時,就會形成閉包。


閉包的幾個寫法和用法

第一種寫法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
    <script type="text/javascript">  
          function Circle(r) {  
            this.r = r;  
           }  
           Circle.PI = 3.14159;  
           Circle.prototype.area = function() {  
             return Circle.PI * this.r * this.r;  
           }  
          var c = new Circle(1.0);     
           alert(c.area());   
    </script>  
</head>  
<body>  
</body>
</html>

這種寫法沒什麼特別的,只是給函數(shù)添加一些屬性。

第二種寫法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
    <script type="text/javascript">  
       var Circle = function() {  
         var obj = new Object();  
         obj.PI = 3.14159;  
        obj.area = function( r ) {  
             return this.PI * r * r;  
           }  
            return obj;  
         }  
        var c = new Circle();  
         alert( c.area( 1.0 ) );  
    </script>  
</head>  
<body>  
</body>
</html>

這種寫法是宣告一個變量,將一個函數(shù)當(dāng)作值賦給變數(shù)。

第三種寫法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
    <script type="text/javascript">  
       var Circle = new Object();  
            Circle.PI = 3.14159;  
            Circle.Area = function( r ) {  
             return this.PI * r * r;  
            }  
           alert( Circle.Area( 1.0 ) );  
    </script>  
</head>  
<body>  
</body>
</html>

這種方法最好理解,就是new 一個對象,然後給對象添加屬性和方法。

第四種寫法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
    <script type="text/javascript">  
         var Circle={  
           "PI":3.14159,  
            "area":function(r){  
               return this.PI * r * r;  
              }  
           };  
          alert( Circle.area(1.0) );  
    </script>  
</head>  
<body>  
</body>
</html>

這種方法使用較多,也最為方便。 var obj = {}就是宣告一個空的物件


#Javascript閉包的用途?

事實上,透過使用閉包,我們可以做很多事情。例如模擬物件導(dǎo)向的程式碼風(fēng)格;更優(yōu)雅,更簡潔的表達(dá)出程式碼;在某些方面提升程式碼的執(zhí)行效率。

1、匿名自執(zhí)行函數(shù)

2、結(jié)果快取

3、封裝

4、實作類別與繼承


#JavaScript 內(nèi)嵌函數(shù)

所有函數(shù)都能存取全域變數(shù)。??

實際上,在 JavaScript 中,所有函數(shù)都能存取它們上一層的作用域。

JavaScript 支援巢狀函數(shù)。巢狀函數(shù)可以存取上一層的函數(shù)變數(shù)。

該實例中,內(nèi)嵌函數(shù)?plus()?可以存取父函數(shù)的?counter?變數(shù):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}
</script>
</body>
</html>

如果我們能在外部存取?plus ()?函數(shù),這樣就能解決計數(shù)器的困境。

我們同樣需要確保?counter = 0?只執(zhí)行一次。

這裡就需要閉包。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button type="button" onclick="myFunction()">計數(shù)!</button>
<p id="demo">0</p>
<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>

實例解析

變數(shù)?add?指定了函數(shù)自我呼叫的回傳字值。

自我呼叫函數(shù)只執(zhí)行一次。設(shè)定計數(shù)器為 0。並返回函數(shù)表達(dá)式。

add變數(shù)可以當(dāng)作一個函數(shù)使用。非常棒的部分是它可以存取函數(shù)上一層作用域的計數(shù)器。

這個叫作 JavaScript?閉包。它使得函數(shù)擁有私有變數(shù)變成可能。

計數(shù)器受匿名函數(shù)的作用域保護(hù),只能透過 add 方法修改。

閉包是可存取上一層函數(shù)作用域裡變數(shù)的函數(shù),即便上一層函數(shù)已經(jīng)關(guān)閉。

繼續(xù)學(xué)習(xí)
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <script type="text/javascript"> function buildFunctions(){ var funcArr = []; for(var i = 0; i < 3; i++){ funcArr.push((function(j){ return function(){ console.log(j); }; }(i))); } return funcArr; } var fs = buildFunctions(); fs[0](); //0 fs[1](); //1 fs[2](); //2 </script> </head> <body> <p>請在瀏覽器中點擊 F12 來觀察結(jié)果</p> </body> </html>