JavaScriptのクロージャの謎！-jsチュートリアル-php.cn

JavaScriptのクロージャの謎！

Linda Hamilton

リリース： 2024-11-27 01:50:14

オリジナル

677 人が閲覧しました

Mystery of Closures in JavaScript!

一見すると、クロージャーは複雑な概念のように見えるかもしれませんが、見た目よりもはるかに単純であることを心配しないでください。混乱を取り除き、クロージャに関するよくある誤解に対処しましょう。

閉鎖に関する一般的な通説

❌ クロージャは、周囲のスコープにアクセスできる特別な関数です。
真実ではありません

クロージャは関数と同じではありません。
JavaScript では、すべての関数は本質的に、それが定義されたスコープにアクセスできます。これが関数の仕組みです!

❌ クロージャにはネストされた関数が必要です。
また間違えました

関数のネストはクロージャの作成とは何の関係もありません。
関数が作成されるたびに、周囲のスコープを含むクロージャが自動的に形成され、ネストする必要はありません。

現実は何ですか❓

クロージャーは魔法やユニークな機能ではありません。代わりに、それらは関数と、関数が作成されたスコープの変数の単なる組み合わせです。すべての関数はこのコンテキストにバンドルされています。コンテキストは、そのコンテキストがどこから来たのかを記憶するものだと考えてください。

MDN が承認した定義は次のとおりです:

クロージャは、周囲の状態への参照とバンドルされた関数の組み合わせです。

わかりやすく言うと、クロージャを使用すると、関数が別の場所で実行された場合でも、関数が作成された場所の変数を「記憶」できます。

実際のクロージャを見てみましょう ??‍?

これは楽しい小さな例です:

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

ログイン後にコピー

ここで何が起こっているのですか? ?
createCounter が呼び出されると、そのスコープ内に変数 count が作成されます。
createCounter の実行がすでに終了している場合でも、返された関数は count を記憶しています。
カウンタが呼び出されるたびに、クロージャのためカウントにアクセスして更新できます。

なぜクロージャが重要なのでしょうか? ?

クロージャーは、面接をうまく進めるための単なる理論的な概念ではなく、非常に便利です。以下に実際のシナリオをいくつか示します:

1. データプライバシー

クロージャは変数をプライベートに保ち、外部からアクセスできないようにすることができます。

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

ログイン後にコピー

2. イベントハンドラー

クロージャは、イベントリスナーが何らかの状態を「記憶」したい場合に便利です。

function greetUser(username) {
    return function() {
        console.log(`Hello, ${username}!`);
    };
}

const greetJohn = greetUser("John");
document.getElementById("myButton").addEventListener("click", greetJohn);
// Even after greetUser is done, greetJohn remembers "John"

ログイン後にコピー

3. 部分適用

クロージャを使用すると、関数の引数を事前に設定できます。

function multiply(a) {
    return function(b) {
        return a * b; // "a" is remembered
    };
}

const double = multiply(2);
console.log(double(5)); // Output: 10
console.log(double(10)); // Output: 20

ログイン後にコピー

待ってください、クロージャーは完璧ですか❓

いつもではありません!注意しないと、クロージャが変数への参照を必要以上に長く保持することによってメモリリークを引き起こす可能性があります。たとえば、クロージャがループ内で使用されると、意図しない動作が簡単に作成されます:

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

ログイン後にコピー

これを修正するには、let (ブロックスコープ) または IIFE を使用できます。

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

ログイン後にコピー