JavaScript閉包（closure）的學習

tianren124 發布于2019-08-23 12:15 / 1485人閱讀

摘要：下面讓我們來看一個例子上面就是一個最簡單的閉包。閉包的作用接下來來談談閉包的作用，初學者剛接觸時肯定是一臉懵逼，閉包的用處究竟是什么，下面就來談一談。同時也得感謝參考文章閉包的應用讓你分分鐘理解閉包閉包，懂不懂由你，反正我是懂了

昨天在看思否時，發現了一篇文章是關于JavaScript如何實現重載的，由于以前也和學長討論過JavaScript是否能夠重載，就點進去看了看，發現里面的兩個方法的其中一個需要用閉包實現，就看了幾篇博客學習了一下，順便寫篇博客加深一下印象。
（JavaScript重載的文章在這：https://segmentfault.com/a/11...）

什么是閉包

閉包的本質是一個函數

閉包可以訪問函數內部變量

閉包的存在會使內部變量保留在內存中

這個可以說是閉包比較容易讓人理解又比較全面的解釋了，更通俗一些：當function里嵌套function時，內部的function可以訪問外部function里的變量。

下面讓我們來看一個例子：

function A(){
    function B(){
       console.log("Hello Closure!");
    }
    return B;
}
var C = A();
C();// Hello Closure!

上面就是一個最簡單的閉包。

就下來讓我們來看一下下面這個函數，他是不是一個閉包呢？

 function foo(x) {
  var tmp = 3;
  function bar(y) {
    alert(x + y + (++tmp));
  }
  bar(10);
}
foo(2);

答案是：并不是，重新看一下閉包的定義，就明白了：

它能嗎？明顯不能，當你return的是內部function時，就是一個閉包。

function foo(x) {
  var tmp = 3;
  return function (y) {
    alert(x + y + (++tmp));
  }
}
var bar = foo(2); // bar 現在是一個閉包
bar(10);

至于能保存的原因，看了看網友的解釋：

由于內部函數嵌套在foo中，導致內部函數的作用域鏈上添加了foo的作用域；而當內部函數被返回后，也要保證其作用域鏈有效，因此，函數foo的作用域不得不被保留在內存中以供內部函數訪問。

閉包的作用

接下來來談談閉包的作用，初學者剛接觸時肯定是一臉懵逼，閉包的用處究竟是什么，下面就來談一談。

一.模仿塊級區域

首先簡單舉個例子來，解釋一下什么是塊級作用域：

function A(num) {
    for (var i = 0; i < num; i++) {
      num++;
    }
    console.log(i)
  }

在這個簡單的函數中，變量i是在for循環中定義的，如果是在C++或者Java中，這樣定義的變量，一旦循環結束，變量也就隨之銷毀，i的作用范圍只在循環這個小塊，就稱為塊級作用域。在javascript中，沒有這樣的塊級作用域，前面一篇文章已經提到，變量是定義在函數的活動對象中的，因此，從定義i開始，在函數內部可以隨時訪問它。
這樣的壞處顯而易見：由于javascript不會告訴你變量是否已經被聲明，容易造成命名沖突，如果是在全局環境定義的變量，就會污染全局環境，因此可以利用閉包特性來模擬塊級作用域

明白了塊級作用域，接下來看看js怎么實現的吧：

function A(num) {
    //下面是一個匿名立即執行函數
    //核心代碼
   (funnction(){
    for(var i = 0; i
使用這個就可以有效的避免全局污染，也許有人會對匿名立即執行函數為什么是一個閉包感到困惑，如果有這個問題可以點擊這里查看
二.存儲變量
閉包的另一個作用是可以保存外部函數的變量
function StorageVariable(){
    var x = 100;
    return {
        function(){
            return x
        }
    }
}

var test = StorageVariable();//運行StorageVariable函數，生成活動變量 x被test引用
這種寫法可能會用在把一些不經常變動，但是計算比較復雜的值保存起來，就可以節省每次訪問的時間.
三.封裝私有變量
javascript中沒有私有成員的概念，我們可以把函數當做一個范圍，函數內的變量就是私有變量:
function Person(){
    var name = "default";
    this.getName = function(){
        return name;
    }
    this.setName = function(value){
        name = value;
    }
}
var person = new Person()
console.log(person.getName())//default
console.log(person.setName("mike"))
console.log(person.getName())//mike
這樣就可以像私有變量一樣訪問和改變person的name了。
總結
不得不說寫博客總結對學習這種比較難的東西真的很有用，明明我昨天感覺自己已經大概弄明白了，但在寫著寫著的時候又陷入了困惑，雖然寫完這個不敢說已經完全弄懂了，但至少比昨天強了，但要完全掌握還任重而道遠，還得靠多使用。同時也得感謝
參考文章
js閉包的應用
讓你分分鐘理解 JavaScript 閉包
閉包，懂不懂由你，反正我是懂了

GPU云服務器云服務器 javascript閉包 javascript閉包詳解 javascript的學習學習javascript的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98204.html

通過示例學習JavaScript閉包

摘要：譯者按在上一篇博客，我們通過實現一個計數器，了解了如何使用閉包，這篇博客將提供一些代碼示例，幫助大家理解閉包。然而，如果通過代碼示例去理解閉包，則簡單很多。不過，將閉包簡單地看做局部變量，理解起來會更加簡單。 - 譯者按: 在上一篇博客，我們通過實現一個計數器，了解了如何使用閉包(Closure)，這篇博客將提供一些代碼示例，幫助大家理解閉包。原文: JavaScript Clos...

xingpingz 2019-08-22 10:54 評論0 收藏0
學習Javascript閉包（Closure）

摘要：另一方面，函數外部無法直接讀取函數內的局部變量。這說明，函數中的局部變量一直保存在內存中，并沒有在調用后被自動清除。首先函數沒有使用關鍵字來聲明，因此是一個全局變量，而不是局部變量。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。原文鏈接 - http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures...

LeoHsiun 2019-08-20 14:32 評論0 收藏0
The Little JavaScript Closures

摘要：寫在前面本文嘗試模仿的風格，介紹的閉包。本文同時也是我學習閉包的一次總結。注根據這篇文章，事實上所有函數在創建的時候都會形成閉包。但這種閉包并沒什么趣味，也沒什么特別的用途，所以我們更關注的是由內部函數形成的閉包。寫在前面本文嘗試模仿 The Little Schema 的風格，介紹 JavaScript 的閉包。本文同時也是我學習 JavaScript 閉包的一次總結。歡迎一起討...

Heier 2019-08-19 17:10 評論0 收藏0
javascript閉包介紹

摘要：下面這個例子就是閉包，函數能夠訪問到不在其代碼塊里的變量。然而事實恰恰相反，唯一的解釋就是是一個閉包。性能問題執行一次，就會重新構造兩個函數。正確的做法應該是參考資料深入理解閉包學習閉包阮一峰概念閉包(closure)是一個擁有任意變量以及綁定這些變量的環境(environment)的表達式(一般來說是就是function) A closure is an expression (...

weij 2019-08-22 10:35 評論0 收藏0
掌握Javascript面試：什么是閉包？

摘要：我的意思是大多數稱職的面試官會問你什么是閉包，并且在大多數時候你回答錯誤將失去這份工作。在閉包的范圍內定義的任何公開方法都是特權的。使對象的數據私有化并不是閉包的唯一用途。文章來源于:https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36 在J...

jifei 2019-08-21 18:21 評論0 收藏0