JavaScript의 클로저 메커니즘 이해 및 사용_기본 지식

위대한 아인슈타인 동지는 다음과 같이 말했습니다. "6세 어린이에게 명확하게 설명할 수 없다면, 스스로 이해하지 못하는 것입니다." 그러나 27세 친구에게 폐쇄가 무엇인지 설명했을 때 나는 완전히 실패했습니다.

이것은 원래 Stack Overflow에서 외국 친구가 JavaScript 클로저에 관해 제기한 질문이었습니다. 하지만 이 질문은 Stack Overflow에서 제기되었기 때문에 당연히 많은 전문가들이 이에 답하기 위해 나올 것입니다. 다음과 같은 답변 중 일부는 참으로 고전적입니다.

외부 함수, 즉 함수 중첩 함수에 내부 함수를 정의하면 내부 함수도 외부 함수의 변수에 액세스할 수 있습니다.

function foo(x) {
 var tmp = 3;
 function bar(y) {
 alert(x + y + (++tmp));
 }
 bar(10);
}

foo(2); // alert 16
foo(2); // alert 16
foo(2); // alert 16

bar가 외부 함수의 변수 tmp에 액세스할 수 있고 외부 함수 foo의 매개변수 x에도 액세스할 수 있기 때문에 이 코드는 올바르게 실행되어 결과 16을 반환할 수 있습니다. 그러나 위의 예는 종결이 아닙니다!

클로저를 구현하려면 내부 함수가 외부 함수의 반환 값으로 반환되어야 합니다. 반환 전에 내부 함수는 메모리에서 액세스한 외부 함수의 모든 변수를 잠급니다. 이러한 변수는 다음과 같이 bar의 메모리에 상주하며 가비지 수집기에 의해 재활용되지 않습니다.

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + (++tmp));
 }
}
var bar = foo(2); // bar 现在是个闭包了
bar(10); // alert 16
bar(10); // alert 17
bar(10); // alert 18

위 코드에서 bar가 처음 실행될 때 결과는 여전히 16으로 반환됩니다. 이는 더 이상 foo의 범위에 직접 존재하지 않지만 bar는 여전히 x 및 tmp에 액세스할 수 있기 때문입니다. 따라서 bar가 닫힐 때 tmp가 잠겨 있으므로 bar가 실행될 때마다 tmp가 증가하므로 bar가 두 번째와 세 번째로 실행되면 각각 17과 18이 반환됩니다.

이 예에서 x는 단지 순수 값입니다. foo가 호출되면 x 값이 매개변수로 foo에 복사됩니다.

그러나 JavaScript는 객체를 처리할 때 항상 참조를 사용합니다. 객체를 매개변수로 사용하여 foo를 호출하면 foo에 전달되는 내용은 실제로 원본 객체에 대한 참조이므로 원본 객체도 닫히는 것과 동일합니다. . , 다음과 같습니다:

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + tmp++);
 x.memb = x.memb ? x.memb + 1 : 1;
 alert(x.memb);
 }
}
var age = new Number(2);
var bar = foo(age); // bar 现在是个闭包了
bar(10); // alert 15 1
bar(10); // alert 16 2
bar(10); // alert 17 3

예상대로 bar(10)이 실행될 때마다 tmp뿐만 아니라 x.memb도 증가합니다. 함수 본문의 x와 함수 외부의 age가 동일한 객체를 참조하기 때문입니다.

http://stackoverflow.com/questions/111102/how-do-javascript-closures-work를 통해

보충: 위의 예를 통해 클로저를 더 명확하게 이해할 수 있을 것입니다. 이해하셨다면 다음 코드의 실행 결과를 추측해 보세요.

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + tmp++);
 x.memb = x.memb ? x.memb + 1 : 1;
 alert(x.memb);
 }
}
var age = new Number(2);
var bar1 = foo(age); // bar1 现在是个闭包了
bar1(10); // alert 15 1
bar1(10); // alert 16 2
bar1(10); // alert 17 3

var bar2 = foo(age); // bar2 现在也是个闭包了
bar2(10); // alert ? ?
bar2(10); // alert ? ?
bar2(10); // alert ? ?

bar1(10); // alert ? ?
bar1(10); // alert ? ?
bar1(10); // alert ? ?

실제로 클로저를 사용하면 funarg에 정의된 다양한 계산 방법을 사용자 정의할 수 있어 매우 우아한 디자인을 만들 수 있습니다. 다음은 정렬 조건 함수를 매개변수로 받는 배열 정렬의 예입니다.

[1, 2, 3].sort(function (a, b) {
 ... // 排序条件
});

같은 예는 배열의 map 메소드가 함수에 정의된 조건에 따라 원래 배열을 새 배열에 매핑하는 것입니다.

[1, 2, 3].map(function (element) {
 return element * 2;
}); // [2, 4, 6]

기능적 매개변수를 사용하면 검색 방법을 쉽게 구현하고 무제한 검색 조건을 지원할 수 있습니다.

someCollection.find(function (element) {
 return element.someProperty == 'searchCondition';
});

각 배열 요소에 함수를 적용하는 일반적인 forEach 메서드와 같은 응용 함수도 있습니다.

[1, 2, 3].forEach(function (element) {
 if (element % 2 != 0) {
  alert(element);
 }
}); // 1, 3

그런데 함수 객체의 적용 및 호출 메서드는 함수형 프로그래밍에서 응용 함수로도 사용할 수 있습니다. 여기에서는 이를 응용 프로그램 함수, 즉 매개변수에 적용되는 함수로 생각합니다(적용에서는 매개변수 목록이고 호출에서는 독립 매개변수입니다).

(function () {
 alert([].join.call(arguments, ';')); // 1;2;3
}).apply(this, [1, 2, 3]);

폐쇄에는 또 다른 매우 중요한 용도가 있습니다. 통화 지연:

var a = 10;
setTimeout(function () {
 alert(a); // 10, after one second
}, 1000);
还有回调函数：

//...
var x = 10;
// only for example
xmlHttpRequestObject.onreadystatechange = function () {
 // 当数据就绪的时候，才会调用;
 // 这里，不论是在哪个上下文中创建
 // 此时变量“x”的值已经存在了
 alert(x); // 10
};
//...

도우미 개체를 숨기기 위해 캡슐화 범위를 만들 수도 있습니다.

var foo = {};

// 初始化
(function (object) {

 var x = 10;

 object.getX = function _getX() {
  return x;
 };

})(foo);

alert(foo.getX()); // 获得闭包 "x" – 10