到底什么是閉包？深入理解javascript閉包

figofuture 發布于2019-08-23 10:59 / 2420人閱讀

摘要：如何使用閉包所以這時候我們就要用閉包去解決這個問題了，先看代碼。計數器為這時候的就形成了一個閉包。一個閉包由兩部分組成，函數和創建該函數的環境。就是創建了一個匿名函數調用函數解除對匿名函數的引用，以便釋放內存

古老定義

閉包(closure)，是指函數變量可以保存在函數作用域內，因此看起來是函數將變量“包裹”了起來。
//根據定義，包含變量的函數就是閉包
function foo() {
    var a = 0;
}
cosole.log(a) 
// Uncaught ReferenceError: a is not defined

《JavaScript高級程序設計》對閉包定義

閉包是指有權訪問另一個函數作用域中的變量的函數

 //根據《JavaScript高級程序設計》，訪問上層函數的作用域的內層函數就是閉包
function foo() {
    var a = 2;
    function bar() {
        console.log(a);
    }
    bar();
}
foo();

《JavaScript權威指南》對閉包定義

函數對象可以通過作用域鏈相互關聯起來，函數體內部變量可以保存在函數作用域內，這就是閉包。

 var global = "global scope"; //全局變量
function checkscope() {
    var scope = "local scope"; //局部變量
    function f() {
        return scope; //在作用域中返回這個值
    };
    return f();
}
checkscope(); // 返回 "local scope"

嚴格來說，閉包需要滿足三個條件：【1】訪問所在作用域；【2】函數嵌套；【3】在所在作用域外被調用
　　有些人覺得只滿足條件1就可以，所以IIFE是閉包；有些人覺得滿足條件1和2才可以，所以被嵌套的函數才是閉包；有些人覺得3個條件都滿足才可以，所以在作用域以外的地方被調用的函數才是閉包

為什么我們需要閉包

首先來看一個例子，我們來實現一個計數器。

var counter = 0;
function add() {
   return counter += 1;
}
add();
add();
add();// 計數器現在為 3

現在我們已經達到了目的，可是問題來了，代碼中的任何一個函數都可以隨意改變counter的值，所以這個計數器并不完美。那我們把counter放在add函數里面不就好了么？

function add() {
    var counter = 0;
    return counter += 1;
} 
add();
add();
add();// 本意是想輸出 3, 但輸出的都是 1

所以這樣做的話，每次調用add函數，counter的值都要被初始化為0，還是達不到我們的目的。

如何使用閉包

所以這時候我們就要用閉包去解決這個問題了，先看代碼。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();// 計數器為 3

這時候我們完美實現了計數器。這段非常精簡，可以拆分成如下等價代碼。

function outerFunction () {
     var counter = 0;
     function innerFunction (){
         return counter += 1;
     }
     return innerFunction;
}
var add = outerFunction();
add();
add();
add();// 計數器為 3

這時候的add就形成了一個閉包。一個閉包由兩部分組成，函數和創建該函數的環境。環境是由環境中的局部變量組成的。對于閉包add來說，它由函數innerFunction和變量counter組成，所以這時候add是可以訪問變量counter的。

使用閉包應注意的問題

由于閉包會攜帶包含它的函數的作用域，因此會比其他函數占用更多的內存。因此可以手動解除對匿名函數的引用，以便釋放內存。

function f2(){
    var n=22;
    var nAdd=function(){n++};
    return function(){
        return {
            n:n,
            nAdd:nAdd
        }
    }
}
//result2就是創建了一個匿名函數
var result2=f2();
//調用函數
console.log(result2());
result2().nAdd();
console.log(result2());
//解除對匿名函數的引用，以便釋放內存
result2=null;

GPU云服務器云服務器 js閉包的理解 javascript閉包 javascript閉包詳解深入理解javascript

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

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

理解Javascript的閉包

摘要：但是閉包也不是什么復雜到不可理解的東西，簡而言之，閉包就是閉包就是函數的局部變量集合，只是這些局部變量在函數返回后會繼續存在。可惜的是，并沒有提供相關的成員和方法來訪問閉包中的局部變量。 (收藏自技術狂) 前言：還是一篇入門文章。Javascript中有幾個非常重要的語言特性——對象、原型繼承、閉包。其中閉包對于那些使用傳統靜態語言C/C++的程序員來說是一個新的語言特性。本文將...

dayday_up 2019-08-21 12:37 評論0 收藏0
深入理解閉包——到底什么才是閉包

摘要：古老定義閉包，是指函數變量可以保存在函數作用域內，因此看起來是函數將變量包裹了起來根據定義，包含變量的函數就是閉包定義一閉包是指可以訪問其所在作用域的函數按照定義一的說法，需要通過作用域鏈在全局環境中查找變量的函數就是閉包定義二閉包是指有權古老定義閉包(closure)，是指函數變量可以保存在函數作用域內，因此看起來是函數將變量包裹了起來 //根據定義，包含變量的函數就是閉包 fu...

tomorrowwu 2019-08-22 13:57 評論0 收藏0
還是不明白JavaScript - 執行環境、作用域、作用域鏈、閉包嗎？

摘要：所以，全局執行環境的變量對象始終都是作用域鏈中的最后一個對象。講到這里，可能你已經對執行環境執行環境對象變量對象作用域作用域鏈的理解已經他們之間的關系有了一個較清晰的認識。 JavaScript中的執行環境、作用域、作用域鏈、閉包一直是一個非常有意思的話題，很多博主和大神都分享過相關的文章。這些知識點不僅比較抽象，不易理解，更重要的是與這些知識點相關的問題在面試中高頻出現。之前我也看過...

jlanglang 2019-08-23 16:32 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
深入淺出Javascript閉包

摘要：如果有時需要得到函數內的局部變量。上面代碼中，函數就在函數內部，這時內部的所有局部變量，對都是可見的。所謂內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。閉包不能濫用，否則會導致內存泄露，影響網頁的性能。一、引子閉包（closure）是 Javascript 語言的一個難點，面試時常被問及，也是它的特色，很多高級應用都要依靠閉包實現。本文盡可能用簡單易懂的話，講清楚閉包的概念、...

tyheist 2019-08-23 12:19 評論0 收藏0