폐쇄
자바스크립트의 강점 중 하나는 클로저입니다. Javascript는 함수 내부의 함수인 중첩 함수가 상위 함수의 변수에 액세스할 수 있도록 합니다. 내부 함수가 외부 함수의 변수에 접근하는 이러한 과정을 클로저라고 합니다. 선언된 변수가 내부 중첩 함수에서 자동으로 사용 가능하고 내부 중첩 함수에서 참조되지 않음에도 불구하고 메모리에 상주하면 메모리 누수가 발생합니다.
다음 예에서 'childFunction'은 'parentFunction' 외부 함수 내에 정의된 내부 함수입니다. 매개변수 "outer val"을 사용하여 'parentFunction'을 호출하면 외부 변수 a에 "outer val" 값이 할당됩니다. 이 함수는 내부 함수 "childFunction"에 대한 포인터와 함께 반환됩니다. 변수 'val'.
외부 함수의 지역 변수는 외부 함수가 반환되더라도 여전히 존재합니다. 자바스크립트에서 parentFunction이 호출되는 순간 'a' 속성을 가진 스코프 객체가 생성됩니다. 이 속성에는 "외부 val"이라고도 하는 arg1 값이 포함되어 있습니다. 마찬가지로 parentFunction이 반환되면 변수 val에 포함된 내부 함수(childFunction)를 반환합니다.
내부 함수는 외부 함수의 변수에 대한 참조를 보유하므로 'a' 속성을 가진 범위 개체는 가비지 수집되지 않습니다.
예시
<html>
<body>
<script>
window.onload= function parentFunction(arg1) {
var a = arg1;
return function childFunction (arg2)
{
alert( a +" "+ arg2);
};
};
var val = parentFunction("outer val");
val("inner val");
</script>
</body>
</html> 메모리 누수 방지
하나의 기능 추가
다른 기능을 추가하면 두 개의 내부 기능이 생깁니다. 두 개의 내부 함수가 있기 때문에 어떤 함수도 거기에서 클로저를 완전히 정지하여 외부 함수의 변수를 참조할 수 없습니다.
클로저가 없으면 메모리 누수 가능성이 줄어듭니다.
예
<html>
<body>
<script>
window.onload=function parentFunction(){
var Obj1 = function childFunction1()
{
document.write("the leak is avoided");
};
(function childFunction2(){
var obj2 = document.getElementById("closure");
obj2.onclick=Obj1
})();
};
</script>
<input type = "button" id="closure" value ="Click Here">
</body>
</html> 코드가 실행되면 다음과 같이 버튼이 표시됩니다.
버튼을 누르면 다음과 같이 출력됩니다.
출력
the leak is avoided