JavaScript閉包使用實例分析

這篇文章主要介紹“JavaScript閉包使用實例分析”，在日常操作中，相信很多人在JavaScript閉包使用實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript閉包使用實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

變量作用域

在學習閉包之前，我們首先要理解JavaScript不同與其他語言獨特的變量作用域。在JavaScript中，不存在局部作用域的概念，但是有全局作用域以及函數作用域。全局作用域與其他語言的相同，沒有需要注意的地方，而函數作用域是指函數內部聲明的變量在函數外部無法直接訪問。

var a = 99;
function f1() {
  console.log(a);
}
f1();

上面的代碼中，f1可以讀取到全局變量a，而下面的代碼中a無法被訪問。

function f1() {
  var a = 99;
}
console.log(a);

如何從外部讀取函數內部聲明的變量？

在某些情況下，我們可能需要得到函數內部的變量，正常情況下是無法做到的，因此需要用特殊的辦法。

function f1() {
  var a = 99;
  function f2() {
    console.log(a);
  }
}

上面代碼中，我們在函數f1中定義另一個函數f2，這樣f1中的所有變量對于f2來說就是可見的，既然f2可以讀取到f1中的變量，那么我們只要把f2作為f1的返回值，我們就可以在f1的外部讀取到它內部的變量了。

function f1() {
  var a = 99;
  function f2() {
    console.log(a);
  }
  return f2;
}
var result = f1();
result();

此時，就形成了一個簡單的閉包。因此，閉包就可以簡單的理解為函數中的函數，而本質上，閉包就是一個連接函數內部和外部的橋梁。

閉包的特性

閉包會使得函數中的變量都被保存到內存中。首先我們先看一下以下兩個例子

function A() {
  var count = 0;
  function B() {
    count++;
    console.log(count);
  }
  return B;
}
var C = A();
C(); // 1
C(); // 2
C(); // 3

count是函數A中的一個變量，它的值在函數B中被改變，函數B每執行一次，count的值就在原來的基礎上累加1，因此，函數A中的count變量會一直保存在內存中。

function A(x) {
  function B(y) {
    console.log(x+y);
  }
return B;
}
var C = A(3);
C(5); //8

當3傳入A函數后，B函數就會記住這個值，所以在后面傳入5的時候只會對B函數中的y賦值，所以最后會輸出8。

使用閉包的注意點

由于上述閉包的特性，每次使用閉包都會大量增加內存的消耗，所以不能濫用閉包，否則會影響網頁的性能。我們也可以在函數退出前，使函數內變量指向null來手動刪除變量。我們可以來看下一道經典的面試題來理解。

function outer(){
  var num = 0; //內部變量
  return function add() { //通過return返回add函數，就可以在outer函數外訪問了
    num++; //內部函數有引用，作為add函數的一部分了
    console.log(num);
  };
}
var func1 = outer();
func1(); //實際上是調用add函數， 輸出1
func1(); //輸出2 因為outer函數內部的私有作用域會一直被占用
var func2 = outer();
func2(); // 輸出1 每次重新引用函數的時候，閉包是全新的。
func2(); // 輸出2

到此，關于“JavaScript閉包使用實例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！