closures - 자바 클로저 - JavaScript 클로저는 어떻게 작동합니까?

Closure 개념 / javascript / function / variables / scope

JavaScript 클로저가 구성되는 개념 (예 : 함수, 변수 등)을 알고 있지만 클로저 자체를 이해하지 못하는 사람에게 어떻게 설명 하시겠습니까?

28 revs, 21 users 17%



Answer #1
// 이벤트 핸들러의 범위 밖에서 카운터 선언
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  // 카운터 외부 증가
  counter++;

  if (counter === 3) {
    // 세 번째마다 무언가를합니다.
    console.log("Third time's the charm!");

    // 카운터 재설정
    counter = 0;
  }
});
<button id="button">Click Me!</button>
var element = document.getElementById('button');

element.addEventListener("click", (function() {
  // 카운트를 0으로 초기화
  var count = 0;

  return function(e) { // <-이 함수는 클릭 핸들러가됩니다.
    count++; // 위의`count`에 대한 액세스 권한을 유지합니다.

    if (count === 3) {
      // 세 번째마다 무언가를합니다.
      console.log("Third time's the charm!");

      // 카운터 재설정
      count = 0;
    }
  };
})());
<button id="button">Click Me!</button>

간단한 한 줄 마감

// _______________________ 즉시 호출 ______________________
//         |                                                                |
// | 사용을 위해 보유 된 범위 ___ 다음으로 반환 됨 ____ |
// | 반환 된 함수에 의해서만 | func의 가치 | |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

반환 된 함수 외부의 모든 변수는 반환 된 함수에서 사용할 수 있지만 반환 된 함수 객체에서 직접 사용할 수는 없습니다.

func();  // "val"경고
func.a;  // 찾으시는 주소가 없습니다