js閉包的研究

在看書遇到了講解js閉包的地方,講的太學術了 根本不明白 最近在網上搜集了些資料 發現了一些通俗易懂的講解 終於弄明白了

要理解閉包,首先必須理解Javascript特殊的變量作用域。

變量的作用域無非就是兩種:全局變量和局部變量。

Javascript語言的特殊之處,就在於函數內部可以直接讀取全局變量。


Js代碼

  var n=10;

  function f1(){
    alert(n);
  }

  f1(); //10

另一方面,在函數外部自然無法讀取函數內的局部變量(而通過閉包的形式就可以實現)。

Js代碼

  function f1(){
    var n=999;
  }

  alert(n); // error

這裏有一個地方需要注意,函數內部聲明變量的時候,一定要使用var命令。如果不用的話,實際上是聲明瞭一個全局變量!

Js代碼

function f1(){
    n=10;
  }

  f1();

  alert(n); // 10

 

 但我們有時候需要得到函數內的局部變量,我們怎麼獲得呢?其實通過閉包的形式就可以實現了。

在Javascript語言中,只有函數內部的子函數才能讀取局部變量,因此可以把閉包簡單理解成“定義在一個函數內部的函數”。
 所以,在本質上,閉包就是將函數內部和函數外部連接起來的一座橋樑

 閉包可以用在許多地方。它的最大用處有兩個,一個是前面提到的可以讀取函數內部的變量,另一個就是讓這些變量的值始終保持在內存中
 以下是個js閉包的使用  其中內部函數getNum()就是個閉包函數, nAdd是個全局的匿名閉包函數

function getcounts(){
   var n = 10;
  
   nAdd = function(count){
       n += count;
   }
  
   function getNum(){
       alert(n);
   }

   return getNum;
}

var one = getcounts();

function gotoPage(){
    one();
 nAdd(2);
}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

問題:有關js作用域鏈的問題

var name = "The Window";  
  var object = {  
    name : "My Object",  
    getNameFunc : function(){  
      return function(){  
        return this.name;  
     };  
    }  
};  
alert(object.getNameFunc()()); //The Window

最近剛剛研究js閉包 小弟不明白爲什麼結果是The Window 而不是My Object
name不是全局變量麼? 外層的name不應該被object中的覆蓋麼?

答:

當在函數中訪問一個變量的時候,搜索順序是先搜索自身的活動對象(即return的function),如果存在則返回,如果不存在將繼續作用域鏈上一個函數(即getNameFunc), 在return 的function作用域中是存在this.name的,即window.name,所以沒有必要再向上一個作用域去找。

function纔是作用域, object={}不是作用域。第一個作用域this就是有的啊,就是window對象,所以不用在找了。

this去掉之後在return function的作用域和getNameFunc的作用域中都找不到name了,只能到全局作用域中找到name = The Window。

var name = "The Window";
  var object = {  
    name : "My Object",  
    getNameFunc : function(){  
      return function(){  
        return name;  
     };  
    }  
};  
alert(object.getNameFunc()()); //The Window

 

當你你試着寫成這樣時,因爲現在return function的作用域,找不到再到和getNameFunc的作用域中找就找到了name=test

var name = "The Window";
  var object = {
  name: "My Object",
  getNameFunc: function () {
  var name = "test";
  return function () {
  return name;
  };
  }
  };
  alert(object.getNameFunc()()); //test

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章