클로져 특성 2>>>>>>>>>>
클로져는 그 환경을 기억한다.
- 함수 실행이 마무리되면 해당 컨텍스트는 사라집니다.(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라집니다.
- 여기서 클로져는 제외인데 왜그렇냐면 그 환경을 다 들고있기때문이다.
예1)
toggle이거는
버튼을 누르면 박스 색이 변하는건데
(사실 버튼누르면 박스가 해제됫다가 보엿다 하는거임)
이거는 삼항연산자를 써서 false true 로 스위치처럼 값을 변경해주면 되는거고
이거를
삼항연산자 밑에
느낌표 를 써서 상태를 변화시키는거다
클릭할때마다 ! 느낌표 때매 상태가 반대값으로 수정되고
즉, 일단 외부 값을 두고
내부에서 값을 수정하면 외부도 수정되는것이다.
그럼 그 수정된값의 (삼항연산자안의) 변수는 바로 클로져가되는거고
그 클로져 변수는 외부변수를 참조한다.
버튼 누를때마다, 삼항연산자의 변수의 값이 다른 이유는
외부값을 참조하기 때문이고,
그 외부값은 내부함수의 코드에서 클릭할때마다 변수에게 ! 느낌표를 줘서 반대값으로 값이 수정되게 업데이트되게 해놨다.
즉, 클로져는 외부의 환경을 기억해서 참조한다.
외부 값이 수정되면 그 수정된 값을 계속 참조해서 (기억하고있으니까)
값을 가져오는거다.
즉, 클로져는 외부함수나 외부변수의 환경을 계속 기억하고있다가 그 값을 참조하는거다.
-------------설명코드--------------------
var toggle = (function () {
var isShow = false;
// ① 클로저를 반환
return function () {
// var isShow = false; 만약 여기 isShow변수를 선언한다면, 밑에서 !isShow 이부분이 덮어쓰기해서 var isShow = !isShow; 이렇게 될것이고 그럼 아무일도 일어나지않는다. 그래서 외부함수로 변수를 뺴준거다. 그래야 코드가 먹히니까.
box.style.display = isShow ? 'block' : 'none';
//isShow변수는 false 를 담고있다 그래서 false면 none true면 block이다
// ③ 상태 변경
isShow = !isShow;
};
})();===============================
-----------아래 다른예제------------------------------
일단 클로져를 왜 쓰냐면?
클로져는 이제 이럴때 쓴다.
예를들어 뭔가를 껏다 켯다 해야되거나
즉, 정해진값이 아닌 계속 업데이트된 값(변하는 값)을
참조해야되는 기능을 만들때 쓰인다.
예를들어) 스위치를 껏다 키는 기능은
외부함수를 만들고 그안에 내부함수를 만들어서
외부함수에는 업데이트될 변수를 만들고(변수에 초기값을 미리준다. 떄로는 빈값일수도?있다. )
그리고
내부함수에는 그 변수를 클로져할 클로져(변수)를 두고
또 그 변수상태를 변하게할 조건을 만들어서
이벤트를 넣고 클릭을한다던지 하면,
내부함수의 변수(클로져)에서 값이 변하면,
외부함수의 변수도 값이 수정되는 그런 구조를 만들어서
결국은 내부함수의 변수(클로져)가 외부함수의 변수를 참조하게 되는 것이다.
즉, 클로져는 그 환경을 기록한다.
메모리에 저장해두는 것이다.
예를들어)
함수호출시 아규먼트로 파라미터에 전달해줘서 클로져가 쓰는경우도 각각의 메모리에 다 저장해놓고,
쓰는것 이다.
function hello(name) {
var _name = name;
return function() {
console.log('Hello, ' + _name);
};
}
var hello1 = hello('승민');
var hello2 = hello('현섭');
var hello3 = hello('유근');
hello1(); // 'Hello, 승민'
hello2(); // 'Hello, 현섭'
hello3(); // 'Hello, 유근'
// 여기서 메모리를 release 시키기 클로저의 참조를 제거해야 한다.
hello1 = null;
hello2 = null;
hello3 = null;
그래서 위의 코드처럼
밑에 널값을 넣어서
클로져의 참조를 제거하는 방법이있다.
메모리를 해제하기위해서,,,,
