Heim > Web-Frontend > js-Tutorial > JavaScript-Abschlüsse: Sie sind nicht so gruselig, wie Sie denken!

JavaScript-Abschlüsse: Sie sind nicht so gruselig, wie Sie denken!

DDD
Freigeben: 2025-01-17 16:30:10
Original
888 Leute haben es durchsucht

JavaScript Closures: They

JavaScript-Abschluss: Beherrschen Sie ganz einfach die fortgeschrittenen Fähigkeiten des JS-Bereichs! Sind Sie immer noch besorgt über Probleme mit dem JavaScript-Bereich? Keine Sorge, heute werfen wir einen tieferen Blick auf Verschlüsse und erklären sie leicht verständlich!

Was ist Schließung (populäre Erklärung)?

Stellen Sie sich einen Verschluss als einen Rucksack vor, den eine Funktion mit sich herumträgt. Dieser Rucksack enthält alle Variablen in der Umgebung, in der die Funktion erstellt wurde. Ist es nicht cool?

Sehen wir uns ein einfaches Beispiel an:

<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>
Nach dem Login kopieren

Warum sind Schließungen so wichtig?

Die Stärke von Abschlüssen besteht darin, dass sie uns dabei helfen können, einige sehr nützliche Funktionen zu implementieren:

  1. Private Variablen (wie ein geheimes Tagebuch?)
<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>
Nach dem Login kopieren
  1. Funktionsfabrik (wie ein Zauberspruchmacher✨)
<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>
Nach dem Login kopieren

Schnelle Gedächtnisfähigkeiten

Denken Sie daran, dass Abschlüsse Variablen behalten und daher etwas Speicher beanspruchen. Es ist, als würde man ein Buch in den Rucksack stecken – es nimmt Platz weg! Wenn Sie Tausende von Abschlüssen erstellen, sollten Sie möglicherweise andere Ansätze in Betracht ziehen.

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

Entscheidender Moment

Als ich zum ersten Mal von Abschlüssen erfuhr, war ich beeindruckt, dass sie uns helfen, die Verwendung globaler Variablen zu vermeiden und den Code sauber zu halten. Anstatt den globalen Bereich mit Variablen zu verschmutzen, verwenden Sie Abschlüsse, um Ihren Code organisiert zu halten:

const todoApp = (function() { const task = []; // Privat!

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

})();

todoApp.addTask("Learning-Abschluss"); console.log(todoApp.getTasks()); // ["Learning Closures"]

Zusammenfassung

Das ist es! Abschlüsse mögen auf den ersten Blick etwas knifflig erscheinen, aber es handelt sich lediglich um Funktionen, die einen „Rucksack“ an Variablen mit sich führen. Sie können sie verwenden für:

<code>

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

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

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

快乐编程!?

---

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

Das obige ist der detaillierte Inhalt vonJavaScript-Abschlüsse: Sie sind nicht so gruselig, wie Sie denken!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage