클로저
클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.
자바스크립트는
렉시컬 스코프 : 자바스크립트는 함수를 어디서 호출했는지가 아니라 어디서 정의했는지에 따라 상위 스코프를 결정한다.
렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값을 결정한다 = 함수의 상위 스코프를 결정한다.
렉시컬 환경의 “외부 렉시컬 환경에 대한 참조”에 저장할 참조값, 즉 상위 스코프에 대한 참조는
함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다. = 렉시컬 스코프
함수 객체의 내부 슬롯
함수는 자신의 내부슬롯[[Environment]]에 자신이 정의된 환경, 즉 렉시컬 스코프의 참조를 저장한다.
외부 함수 밖에서 중첩 함수를 호출하더라도 외부 함수의 지역 변수에 접근할 수 있는데 이러한 함수를 클로저
실행 컨텍스트는 실행 컨텍스트 스택에서 제거되지만 outer 함수의 렉시컬 환경까지 소멸하는 것은 아니다
참조하고 있는 대상이 있는 경우 가비지 컬렉션의 대상이 되지 않는다.
자신을 포함하고 있는 외부 함수보다 중첩 함수가 더 오래 유지되는 경우, 외부 함수 밖에서 중첩 함수가 호출되더라도 외부 함수의 식별자에 접근할 수 있는 함수를 일반적으로 클로저
클로저의 활용
상태를 안전하게 유지하기 위해 사용
상태가 의도치 않게 변경되지 않도록 안전하게 은닉 한다.
이전상태를 기억하다가 상태가 변경되며 최신 상태를 유지한다.
<!DOCTYPE html>
<html>
<body>
<button class="increase">+</button>
<span class="counter">0</span>
<button class="decrease">-</button>
<script>
const $counter = document.querySelector('.counter');
const counter = (function () {
// 카운트 상태를 유지하기 위한 자유 변수
let num = 0;
// 클로저를 메소드로 갖는 객체를 반환한다.
// 객체 리터럴은 스코프를 만들지 않는다.
// 따라서 아래 메소드들의 상위 스코프는 즉시 실행 함수의 스코프이다.
return {
// num: 0, // 프로퍼티는 public이므로 정보 은닉이 되지 않는다.
increase() {
$counter.textContent = ++num; // 상태 변경
},
decrease() {
if (num <= 0) return;
$counter.textContent = --num; // 상태 변경
}
};
}());
document.querySelector('.increase').onclick = counter.increase;
document.querySelector('.decrease').onclick = counter.decrease;
</script>
</body>
</html>즉시 실행함수가 반환하는 객체 리터럴은 함수 실행단계에서 평가되어 객체가 된다.
객체의 메소드인 함수도 함수 객체로 생성
객체 리터럴의 중괄호는 코드 블록이 아니므로 별도의 스코프를 생성하지 않음.
increse, decrease 메소드의 상위 스코프는 즉시 실행함수의 스코프이다.
num은 생성자 함수 Counter가 생성할 인스턴스의 프로퍼티가 아니라 즉시 실행 함수내에서 선언된 변수이다.
즉시 실행함수 외부에서도 접근할 수 없는 은닉된변수이다.
'패스트캠퍼스 > 자습' 카테고리의 다른 글
| 자바스크립트 복습(클래스, Module) (0) | 2019.10.10 |
|---|---|
| 리액트 61~69강 정리 (0) | 2019.10.09 |
| 리액트 51~55강 정리 (0) | 2019.10.03 |
| poiemaweb 20~21강 복습 (0) | 2019.10.01 |
| 리액트 46~50강 정리 (0) | 2019.10.01 |