> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 클로저: 생각만큼 무섭지 않습니다!

JavaScript 클로저: 생각만큼 무섭지 않습니다!

DDD
풀어 주다: 2025-01-17 16:30:10
원래의
888명이 탐색했습니다.

JavaScript Closures: They

JavaScript Closure: 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>
로그인 후 복사
  1. 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 = (함수() { const task = []; // 비공개입니다!

<code>return {
    addTask(task) { tasks.push(task) },
    getTasks() { return [...tasks] }
};</code>
로그인 후 복사

})();

todoApp.addTask("학습 종료"); console.log(todoApp.getTasks()); // ["학습 종료"]

요약

그렇습니다! 클로저는 처음에는 약간 까다로워 보일 수 있지만 이는 변수의 "배낭"을 운반하는 함수일 뿐입니다. 다음 용도로 사용할 수 있습니다.

<code>

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

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

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

快乐编程!?

---

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

위 내용은 JavaScript 클로저: 생각만큼 무섭지 않습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿