前端開發須要瞭解的知識之-閉包

什麼是閉包

用一句話歸納:函數外部能夠訪問函數內部的變量(不懂不要緊,請往下面看)

閉包的原理

javascript做用域

對於函數外部的變量,函數內部能夠訪問

var n=1000;
function fn(){
    console.log(n);
}
fn();//輸出1000

---

對於函數內部的變量,函數外部不能夠訪問

function fn(){
    var n=1000;
}
console.log(n)//n is not defined

如何從外部讀取內部變量?

function fn(){
    var n=1000;
    function fn1(){
        return n;
    }
    return fn1;
}
var f=fn();
console.log(f());//1000

在上面的代碼中，函數fn1就被包括在函數fn內部，這時fn內部的全部局部變量，對f1都是可見的。可是反過來就不行，f1內部的局部變量，對fn就是不可見的。這就是Javascript語言特有的"鏈式做用域"結構（chain scope），子對象會一級一級地向上尋找全部父對象的變量。因此，父對象的全部變量，對子對象都是可見的，反之則不成立。
既然f1能夠讀取fn中的局部變量，那麼只要把f1做爲返回值，咱們不就能夠在fn外部讀取它的內部變量了嗎！

閉包的應用場景

//閉包自執行
var foo=function fn(){
    var n=1000;
    return {
        get_n:function(){
            return n;
        },
        set_n:function(new_n){
            n=new_n;
        }
    }
}();
//foo.n  訪問不了,undefined
foo.set_n(999);//經過接口能夠設置內部變量n
console.log(foo.get_n());//經過接口能夠讀取內部變量n

---

做者：甘洪翔
連接： https://www.zhihu.com/questio...
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

var Foo = function(){
      var name = 'fooname';
      var age = 12;
      this.getName = function(){
          return name;
      };
      this.getAge = function(){
          return age;
      };
  };
  var foo = new Foo();

  foo.name;        //  => undefined
  foo.age;         //  => undefined
  foo.getName();   //  => 'fooname'
  foo.getAge();    //  => 12

參考資料

阮一峯老師的:學習Javascript閉包（Closure）
知乎上:JavaScript 裏的閉包是什麼？應用場景有哪些？