연말까지 매일 웹 사이트를 꾸준히 만드는 대학생~60일 동안 Closure 배우기~

6693 단어 JavaScript

개시하다


안녕하세요!@70days_js.
나는 Closure를 배웠다.
예순째 날.(2019/12/17)
잘 부탁드립니다.

사이트 축소판 그림


해본 일


결론부터.
Closure란 무엇입니까?
변수 정의 환경을 유지하는 메커니즘
이런 해석이 가장 적합하다.
잘못이 있으면 메시지를 남겨 주세요.
나는 아주 간단한 카운터를 만들었다.(gif)↓

html↓
  <body>
    <h1>Closure</h1>
    <input type="button" id="button" value="+" />
    <input type="button" id="button2" value="-" />
    <div id="displalyCount"></div>
  </body>
JavaScript↓

function countApp() {
  let count = 0;
  return function plusCount() {
    count++;
    return count;
  };
}

function countApp2() {
  let count = 0;
  return function plusCount() {
    count--;
    return count;
  };
}
let button = document.getElementById("button");
let button2 = document.getElementById("button2");
let displalyCount = document.getElementById("displalyCount");
let counter1 = countApp();
let displalyCount2 = document.getElementById("displalyCount2");
let counter2 = countApp2();

button.addEventListener("click", function() {
  counter1();
  displalyCount.innerHTML = counter1() + counter2();
});

button2.addEventListener("click", function() {
  counter2();
  displalyCount.innerHTML = counter1() + counter2();
});
countApp 함수의 count는 항상 저장 상태입니다.
function countApp() {
let count = 0;
return function plusCount() {
count++;
return count;
};
}
따라서 앞으로 카운터앱 함수를 사용하려면
let hoge = countApp();
이렇게 hoge를 거치면 이전에 진행된 계수가 사라지지 않는다.
이번 횟수의 수법은 여기서 진행된다.
counter1();
displalyCount.innerHTML = counter1() + counter2();
counter2();
displalyCount.innerHTML = counter1() + counter2();

감상


Closure가 이해한 것 같은데, 아직 완전히 이해하지 못한 것 같은데...
뭐지?너 그거 알아?
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

참고 자료


  • JavaScript 중급자의 길 [5. 호출 함수]
    혁신적인 JavaScript는 프런트엔드 엔지니어로서 뛰어넘어야 할 5개의 벽, 즉 대상을 대상으로 한 페이지에서 한 페이지로 응용(← 책을 빌렸다. 링크는 아마존 페이지)
    • TC SRM 584 DIV 2
    intra-mart에 코드 성형 도구를 설치했습니다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage