jsクロージャーとは何ですか? js クロージャを理解する (コード付き)

jsにおけるクロージャとは、関数のスコープ内に関数の変数を格納できることを意味しており、定義によれば、関数が変数を「ラップ」しているようです。

このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

初期の定義

闭包(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"

厳密に言えば、クロージャは 3 つの条件を満たす必要があります:

[1] スコープにアクセスする;

[2] 関数がネストされる

[3] だけで十分だと考える人もいます。条件 1 を満たすため、IIFE はクロージャであると考える人もいます。つまり、条件 1 と 2 が満たされる場合のみ、ネストされた関数はクロージャであると考える人もいます。スコープ外で呼び出される関数がクロージャです

なぜクロージャが必要なのか、そしてjsクロージャの用途は何なのか

まず、例を見てみましょう。

var counter = 0;
function add() {
   return counter += 1;
}
add();
add();
add();// 计数器现在为 3

これで目的は達成できましたが、コード内の関数は任意にカウンターの値を変更できるため、このカウンターは完璧ではありません。だったら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

この時点での追加はクロージャを形成します。クロージャは、関数と関数が作成される環境の 2 つの部分で構成されます。環境は、環境内のローカル変数で構成されます。クロージャ 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;

関連する推奨事項:

JS クロージャの使用法

JS クロージャの簡単な理解

javascript JS クロージャの深い理解

以上がjsクロージャーとは何ですか? js クロージャを理解する (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。