JavaScript の閉鎖: 思っているほど怖くない!

JavaScript クロージャ: JS スコープの高度なスキルを簡単にマスターします。 JavaScript のスコープの問題がまだ心配ですか?心配しないでください。今日はクロージャについて深く掘り下げて、わかりやすく説明していきます。

クロージャ (一般的な説明) とは何ですか?

クロージャーを、機能が持ち歩くバックパックとして想像してください。このバックパックには、関数が作成された環境内のすべての変数が含まれています。クールじゃないですか？

簡単な例を見てみましょう:

<code class="language-javascript">function createGreeting(name) {
    // 这个变量在背包里！
    const message = "Hello, ";

    return function() {
        // 看！我们仍然可以在这里使用'message'
        console.log(message + name);
    }
}

const greetBob = createGreeting("Bob");
greetBob(); // 输出： "Hello, Bob"</code>

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

クロージャーの力は、いくつかの非常に便利な関数の実装に役立つことです。

1. プライベート変数 (秘密の日記のような?)

<code class="language-javascript">function createCounter() {
    let count = 0;  // 这是我们的秘密！

    return {
        increment() { count++ },
        getCount() { return count }
    };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1
// console.log(count); // 错误！无法直接访问它</code>

2. Function Factory (魔法の呪文メーカーのような✨)

<code class="language-javascript">function createMultiplier(multiplier) {
    return (number) => number * multiplier;
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15</code>

高速記憶スキル

クロージャは変数を保持するため、ある程度のメモリを消費することに注意してください。バックパックに本を入れるのと同じで、場所を取ります。何千ものクロージャを作成する場合は、他のアプローチを検討することをお勧めします。

<code class="language-javascript">// 在循环中要小心使用！
for (let i = 0; i < 10; i++) {
    // ...
}</code>

重大な瞬間

私が初めてクロージャについて学んだとき、クロージャがグローバル変数の使用を避け、コードをクリーンに保つのに役立つということに感銘を受けました。変数でグローバル スコープを汚すのではなく、クロージャを使用してコードを整理してください:

const todoApp = (function() { const タスク = []; // プライベート!

<code>return {
    addTask(task) { tasks.push(task) },
    getTasks() { return [...tasks] }
};</code>

})();

todoApp.addTask("学習終了"); console.log(todoApp.getTasks()); // ["ラーニング クロージャ"]

概要

それだけです！クロージャは最初は少し難しく思えるかもしれませんが、変数の「ナップザック」を運ぶ単なる関数です。次の用途に使用できます:

<code>

- 创建私有变量
- 创建函数工厂
- 保持代码整洁

记住要注意内存使用，你就能轻松驾驭闭包！

你最喜欢的闭包用法是什么？请在下方评论——我很想听听你的想法！

快乐编程！?

---

*觉得这篇文章有帮助吗？关注我，获取更多不会让你头疼的JavaScript技巧和窍门!*</code>

以上がJavaScript の閉鎖: 思っているほど怖くない!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。