Maison >interface Web >js tutoriel >Fermetures JavaScript : elles ne sont pas aussi effrayantes que vous le pensez !

Fermetures JavaScript : elles ne sont pas aussi effrayantes que vous le pensez !

DDD
DDDoriginal
2025-01-17 16:30:10889parcourir

JavaScript Closures: They

Fermeture JavaScript : maîtrisez facilement les compétences avancées de la portée JS ! Êtes-vous toujours préoccupé par les problèmes de portée JavaScript ? Ne vous inquiétez pas, aujourd’hui nous allons examiner de plus près les fermetures et les expliquer d’une manière facile à comprendre !

Qu'est-ce que la fermeture (explication populaire) ?

Imaginez une fermeture comme un sac à dos qu'une fonction transporte. Ce sac à dos contient toutes les variables de l'environnement dans lequel la fonction a été créée. N'est-ce pas cool ?

Regardons un exemple simple :

<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>

Pourquoi les fermetures sont-elles si importantes ?

Le pouvoir des fermetures est qu'elles peuvent nous aider à mettre en œuvre certaines fonctions très utiles :

  1. Variables privées (comme un journal intime ?)
<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>
  1. Function Factory (comme un créateur de sorts magiques✨)
<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>

Compétences de mémoire rapide

N'oubliez pas que les fermetures conservent les variables, elles occupent donc de la mémoire. C’est comme mettre un livre dans son sac à dos : ça prend de la place ! Si vous créez des milliers de fermetures, vous souhaiterez peut-être envisager d'autres approches.

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

Moment crucial

Quand j'ai découvert les fermetures pour la première fois, ce qui m'a impressionné, c'est qu'elles nous aident à éviter d'utiliser des variables globales et à garder le code propre. Plutôt que de polluer la portée globale avec des variables, utilisez des fermetures pour garder votre code organisé :

const todoApp = (function() { const tâches = []; // Privé !

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

})();

todoApp.addTask("Fermeture de l'apprentissage"); console.log(todoApp.getTasks()); // ["Fermetures d'apprentissage"]

Résumé

C'est ça ! Les fermetures peuvent sembler un peu délicates au début, mais ce ne sont que des fonctions qui transportent un « sac à dos » de variables. Vous pouvez les utiliser pour :

<code>

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

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

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

快乐编程!?

---

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn