首頁  >  文章  >  web前端  >  詳解JavaScript之閉包

詳解JavaScript之閉包

零到壹度
零到壹度原創
2018-03-26 14:34:331335瀏覽

閉包 : 閉包就是一個函數引用另一個函數的變量,因為變數被引用所以不會被回收,因此可以用來封裝一個私有變數。

當內部函數在定義它的作用域的資料外部被引用時,就創建了該內部函數的閉包,如果內部函數引用了位於外部函數的變量,當外部函數調用完畢後,這些變數在記憶體不會被釋放,因為閉包需要它們

變數的作用域:  作用域就兩種,全域作用域和局部作用域

var n=999;
function f1(){
  alert(n);
}
f1(); // 999
function f2(){
  var m=999;
}
alert(m); // error
function f3(){
  i=999; // 函数内部声明变量的时候,一定要使用 var 声明变量,如果不用 var,此时改变量就变成全局变量
}
f3();
alert(i); // 999

從外部讀取局部變數: 正常情況下是辦不到的,但可以在函數的內部再定義一個函數,這樣內部函數就可以存取外部函數的變數。另外,外部函數無法存取內部函數變量,這就是 JavaScript 語言特有的 "鍊式作用域" 結構

function f1() {
  var n = 999;
  function f2() {
    alert(n);
  }
  return f2;
}
var result = f1();
result(); // 999

閉包可以用在許多地方。它的最大用處有兩個,一個是前面提到的可以讀取函數內部的變量,另一個就是讓這些變量的值始終保持在內存中

function f1() {
  var n = 999;
  nAdd = function(){ // nAdd 是全局变量
    n += 1;
  }
  
  function f2() {
    alert(n);
  }
  return f2;
}
var result = f1();
result(); // 999
nAdd();
result(); // 1000

1> 由於閉包會使得函數中的變數都保存在記憶體中,記憶體消耗很大,所以不能濫用閉包,否則會造成網頁的效能問題,在IE中可能導致記憶體外洩。解決方法是,在退出函數之前,將不使用的局部變數全部刪除

2> 閉包會在父函數外部,改變父函數內部變數的值。所以,如果把父函數當作物件(object) 使用,把閉包當作它的公用方法(Public Method),把內部變數當作它的私有屬性(private value),這時一定要小心,不要隨便改變父函數內部變數的值

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function() {
    return function() {
      return this.name;
    };
  },
  getNameFunc2 : function() {
    return () => this.name;
  },
  getNameFunc3 : function() {
    this_ = this;
    return function() {
      return this_.name;
    };
  }
};
alert(object.getNameFunc()());  // The Window,this 指向调用的对象,此处执行的时全局 this 
alert(object.getNameFunc2()()); // My Object,使用箭头函数相当于 getNameFunc3 的写法
alert(object.getNameFunc3()()); // My Object
function outerFun() {
  var a =0;
  alert(a);  
}
var a = 4;
outerFun(); // 0
alert(a); // 4
function outerFun() {
  a = 0; // 没有 var,此时 a 是作用于全局变量,将修改全局变量的 a
  alert(a);  
}
var a=4; // 全局变量 a
outerFun(); // 0
alert(a); // 0
function createFunctions() {
  var result = new Array();
  for (var i=0; i < 10; i++) {
    result[i] = function() {
      return i;
    };
  }
  return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++) { // 打印出 10 个 10,在 js 中使用 () 才会执行函数
  console.log(funcs[i]());
}

#

以上是詳解JavaScript之閉包的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn