JavaScript 클로저, 이해 여부는 당신에게 달려 있지만 나는 이해합니다_javascript 기술

중국에서는 사람들을 가르치고 교육하는 분위기가 없다는 걸 점점 더 느끼게 됩니다. JS의 클로저를 이해하기 위해 CET-4 영어 실력을 사용하여 Google에서 클로저에 대한 설명을 검색했습니다. 대답을 하고 나니 이런 문장이 떠올랐다. 이래서 이 사람이 도망치지 않은 거야!

아래 번역이 웃기네.

Peter Mortensen이 물었습니다.

늙은 Albert가 말했듯이 "6살짜리에게 설명할 수 없다면 스스로 이해하지 못하는 것입니다." 27세 친구에게 JS 클로저(JavaScript 클로저)에 대해 가르치려고 했으나 완전히 실패했습니다.

호기심 많은 6세 어린이에게 이것을 어떻게 설명하시겠습니까?

참고: StackOverflow에 제공된 예제를 본 적이 있지만 전혀 작동하지 않았습니다.

Ali의 답변:

함수가 함수 내에 중첩되면 내부 함수가 외부 함수의 변수에 액세스할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

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

몇 번을 실행해도 경고 16이 발생합니다. bar는 foo의 매개변수 x와 foo의 변수 tmp에 접근할 수 있기 때문입니다.

그러나 아직은 종결된 것이 아닙니다. 내부 함수를 반환하면 이는 클로저입니다. 내부 함수는 내부 함수가 끝날 때까지 외부 함수의 변수를 닫습니다.

코드 복사 코드는 다음과 같습니다.

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

bar가 foo의 내부 범위에 직접 포함되지는 않지만 bar는 여전히 x 및 tmp에 액세스할 수 있으므로 결국 16에 경고합니다.

그러나 tmp는 bar가 있는 클로저 내부에 여전히 존재하므로 여전히 1씩 증가하고 bar를 호출할 때마다 1씩 증가합니다.

(6개를 고려하면 이 제한 사항은 다음과 같습니다. 실제로 배열을 반환하거나 전역 변수로 설정하는 등 둘 이상의 클로저 메서드를 만들 수 있습니다. 각각 복사본을 갖는 대신 모두 동일한 x와 동일한 tmp를 가리킵니다.

참고: 이제 7세 콘텐츠에 대해 이야기해보자.

위의 x는 리터럴 값(값 전달)입니다. JS의 다른 리터럴 값과 마찬가지로 foo가 호출되면 실제 매개변수 x의 값이 복사되며, 복사된 복사본은 The로 사용됩니다. foo의 매개변수 x.

여기서 문제가 발생합니다. JS에서 객체를 다룰 때 참조에 의한 전달이 사용됩니다. 따라서 foo를 호출할 때 객체를 전달하면 foo의 반환 함수도 원본을 참조하게 됩니다.

코드 복사 코드는 다음과 같습니다.

function foo(x) {
var tmp = 3;
반환 함수(y) {
alert(x y tmp)
x.memb = x.memb 1 : 1; memb);
}
var age = new Number(2);
var bar = foo(age) // bar는 이제 age를 참조하는 클로저입니다.
bar(10) );


예상대로 x.memb는 bar(10)이 실행될 때마다 1씩 증가합니다. 그러나 x는 매번 동일한 객체 변수인 age를 가리킨다는 점에 유의해야 합니다. bar(10)을 두 번 실행하면 age.memb는 2가 됩니다.

이는 HTML 객체의 메모리 누수와 관련이 있습니다. 아, 하지만 그것은 질문에 대답할 수 있는 범위를 벗어나는 것 같습니다.

JohnMerlino가 Ali에게 말했습니다.

다음은 반환 키워드가 없는 클로저의 예입니다.

코드 복사 코드는 다음과 같습니다:

function closureExample(obj, text, timedelay) {

setTimeout(function() {
document.getElementById(objID).innerHTML = text;
}, timedelay)
}
closureExample('myDiv', '클로저가 생성됨', 500);
심야 1:37 John Pick이 다음과 같이 대답했습니다.

JS의 함수에서 액세스할 수 있습니다.

1. 매개변수

2.
3.

을 포함한 외부 변수(환경 변수?)3.1 DOM을 포함한 전역 변수

3.2 외부 함수의 변수 또는 함수.

함수가 외부 변수에 액세스하는 경우 이는 클로저입니다.

외부 기능은 필요하지 않습니다. 외부 변수에 접근함으로써 클로저는 이러한 변수를 활성 상태로 유지할 수 있습니다. 내부 및 외부 함수의 경우 외부 함수는 로컬 변수를 생성하고 결국 종료할 수 있습니다. 그러나 하나 이상의 내부 함수가 종료된 후 종료되지 않으면 내부 함수가 외부 함수의 로컬 데이터를 유지합니다.

전형적인 예는 전역 변수의 사용입니다.

mykhal은 다음과 같이 응답했습니다.

Wikipedia의 클로저 정의는 다음과 같습니다.

컴퓨터 과학에서 클로저는 로컬이 아닌 이름에 대한 참조 환경과 함께 함수입니다(

기술적으로 말하면 JS에서 모든 함수는 항상 외부에 정의된 데이터에 액세스할 수 있기 때문에 클로저입니다.

Javascript의 범위 정의 구성은 다른 많은 언어와 같은 코드 블록이 아닌 함수이므로 일반적으로 Javascript에서 클로저가 의미하는 것은 이미 실행된 주변 함수에 정의된 비지역 변수와 작동하는 기능입니다. 🎜>
클로저는 종종 숨겨진 데이터를 포함하는 함수를 만드는 데 사용됩니다(항상 그런 것은 아님).

코드 복사 코드는 다음과 같습니다.

var db = (function() {

/ / 숨겨진 개체를 만듭니다. 이 개체는 일부 데이터를 보유합니다.
// 이 개체는 외부에서 액세스할 수 없습니다.
var data = {}
// 함수를 만듭니다. 이 함수는 일부 액세스를 제공합니다. to data 데이터 메소드
return function(key, val) {
if (val === undefine) { return data[key] } // get
else { return data[key] = val } / /
}
// 이 익명 메소드를 호출할 수 있습니다
// 클로저인 이 내부 함수를 반환합니다
})()
db('x'); // 정의되지 않은 반환
db('x', 1); // data['x']를 1로 설정
db('x'); // 1을 반환
// 데이터 객체 자체
// 하지만 멤버를 설정할 수는 있습니다


해외 전문가들의 답변을 너무 많이 읽어보니 이해가 되실지는 모르겠지만 어쨌든 이해가 됩니다.