> 웹 프론트엔드 > JS 튜토리얼 > Javascript 중첩 함수 및 closures_javascript 기술에 대한 간략한 토론

Javascript 중첩 함수 및 closures_javascript 기술에 대한 간략한 토론

WBOY
풀어 주다: 2016-05-16 18:16:43
원래의
983명이 탐색했습니다.
【중첩 함수】
JavaScript는 내장 함수를 허용하고, 함수를 데이터로 사용할 수 있도록 하며, 함수 어휘 범위 내에서 기존 객체 지향 언어와 놀라운 차이를 만들어낼 수 있습니다.
우선 JavaScript 함수는 동적으로 범위가 지정되지 않고 어휘적으로 범위가 지정됩니다. 따라서 함수는 실행되는 범위가 아닌 정의된 범위에서 실행되므로 중첩된 경우를 이해하기 쉽습니다. 함수와 그 주변 함수는 동일한 어휘 범위에서 정의됩니다. 예를 들어 다음과 같은 매우 평범한 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.

var x = 'global';
function f () {
var x = 'local';
function g() {
alert(x); ();
}
f(); // 'local'


f()가 호출되면 호출을 포함하여 두 부분으로 구성된 것으로 이해될 수 있습니다. f 객체의 다음 전역 객체가 옵니다. 이때, x의 값을 검색할 때에는 f의 호출 객체부터 먼저 검색하게 되며, 찾지 못하면 후속 전역 객체에서 x를 검색하게 된다. 마찬가지로 g는 f의 중첩 함수이므로 g가 호출될 때 범위 체인은 g의 호출 개체, f의 호출 개체, 전역 개체의 세 부분으로 구성되어야 합니다. 함수 g는 x 값을 출력하므로 먼저 g의 호출 개체에서 x 값을 검색합니다. 그런 다음 주변 f 호출 개체에서 x의 정의를 검색합니다. x='local'을 찾으면 전역 개체를 계속 검색하는 대신 x를 출력합니다. x 값이 f에 정의되어 있지 않으면 범위 체인 뒤에 있는 전역 개체를 계속 검색하고 결과는 전역이 됩니다. 전역 객체에 정의되어 있지 않으면 당연히 정의되지 않습니다.
알겠습니다. 동시에 우리는 클로저에 두 가지 일반적인 용도가 있다는 것을 알고 있습니다. 하나는 로컬 변수에 액세스하는 데 사용할 수 있다는 것이고, 다른 하나는 사용할 수 있다는 것입니다. 주변적으로는 해당 필드의 변수 값이 메모리에 저장되며 함수 호출이 완료된 후에도 소멸되지 않습니다.
다음으로 클로저가 외부 변수 값을 메모리에 저장할 수 있는 이유를 이해하는 데 도움이 될 수 있는 평범한 예를 살펴보겠습니다.


function makeFunc (x) {
return function ( ) {return x }
}
var a = [makeFunc(0), makeFunc(1), makeFunc(2)]
alert(a[0]()); >alert( a[1]());
alert(a[2]());


실행 결과는 0,1,2 입니다. 또한 어휘 범위의 엄격한 일반 동작입니다. 각 makeFunc 호출이 완료된 후 해당 호출 개체는 범위 체인에서 제거되고 더 이상 이에 대한 참조가 없으며 결국 가비지 수집을 통해 완료됩니다. 좀 더 자세히 말하자면 이렇게 이해할 수 있습니다.
makeFunc가 호출될 때마다 호출 개체가 생성되어 범위 체인에 배치됩니다. makeFunc 함수의 경우 호출 개체에는 속성이 포함되어 있습니다. 함수가 실행되면 호출 개체가 생성되어 범위 체인에 배치됩니다. 익명 함수의 호출 객체이므로 주변 함수를 참조합니다. makeFunc의 호출 객체(액세스) 호출 객체에 x가 포함되어 있으므로 x도 소멸될 때 소멸됩니다. 저장되지 않습니다.
위는 함수의 상세한 실행 과정이므로 잘 이해하시고 아래의 변경된 코드를 살펴보시기 바랍니다.



코드 복사 코드는 다음과 같습니다: var x = 0;
function makeFunc () {
return function () {return x }
}
var a = [ makeFunc(), makeFunc(), makeFunc()];
alert(a[0]())
alert(a[1]()); );


이제 x는 전역 변수이고 실행 결과는 0, 1, 2이지만 이 결과는 위와 다소 다릅니다. 다음으로, 이러한 결과가 나온 이유를 스코프 체인의 관점에서 이해하겠습니다.
마찬가지로 makeFunc가 호출될 때마다 내부 중첩 함수에 대한 참조를 반환하므로 호출 개체를 범위 체인에 생성하므로 내부 중첩 함수가 실행되기 시작하고 중첩 함수에 대한 호출 개체가 생성됩니다. 범위 체인. 그런 다음 x 값을 반환합니다. 여기서는 중첩된 함수의 호출 개체에 x가 없고 주변 makeFunc의 호출 개체에도 x가 없습니다. 전역 객체에서 x의 정의를 찾았으므로 정상적으로 실행되고, x의 값이 반환되고, x가 1씩 증가한 다음 중첩 함수가 완료되고, 호출 객체가 제거되고, makeFunc가 완료됩니다. 호출 객체도 제거되지만 호출 객체에 x가 없기 때문에 호출 객체가 소멸되더라도 x에는 전혀 영향을 미치지 않습니다. 결과적으로 전역 변수 x 값의 변경 사항이 저장됩니다.
위에서 언급한 외부 호출 개체에 대한 액세스는 이해를 돕기 위한 것일 뿐 엄격하지 않습니다. 그러나 JavaScript는 호출 개체에 직접 액세스하지 않습니다. 그러나 정의하는 속성은 범위 체인의 일부입니다. 호출 개체는 여전히 "살아있습니다". 또한 주변 함수에 모두 전역 개체에 대한 참조가 있는 두 개 이상의 중첩 함수가 포함된 경우 이러한 중첩 함수는 모두 동일한 전역 호출 개체를 공유하며 그 중 하나에 의한 전역 개체에 대한 변경 사항이 다른 함수에 표시됩니다. 의.
자바스크립트에서 함수는 실행될 코드와 이러한 코드가 실행되는 범위로 구성된 복합체입니다. 광범위하게 말하면 이러한 코드와 범위의 복합체를 클로저라고 부를 수 있습니다.
 【Closure】
가끔 변수의 값을 기억하기 위해 호출해야 하는 함수를 작성해야 할 때가 있습니다. 따라서 범위를 이해하면 호출 후에 함수의 호출 개체를 유지할 수 없기 때문에 지역 변수를 달성하기 어렵다는 것을 알 수 있습니다. 위의 예에서처럼 전역 변수가 이를 수행할 수 있지만 이로 인해 전역 변수 오염이 쉽게 발생할 수 있습니다. 호출 객체를 유지할 수 없으니 그냥 호출 객체에 값을 저장하면 안되는 걸까요? ! 따라서 이를 수행하는 한 가지 방법은 다음과 같습니다. 함수 개체 자체의 속성을 사용하여 저장하는 것입니다.
코드 복사 코드는 다음과 같습니다.

uniqueID = function() {
if (!args.callee.id)args.callee.id = 0;
returnargs.callee.id
}
alert(uniqueID()) //0
alert(uniqueID) ()) ; //1

위와 같이 함수 자체가 객체이기 때문에 함수 자체의 속성 중 하나로 저장하는 것이 가능하지만, 여기에는 문제가 있습니다. 즉, 누구나 언제든지 저장할 수 있습니다. unqueID.id를 통해 원래 저장한 값에 강제로 액세스하여 수정할 수 있습니다. 이것이 우리가 보고 싶지 않은 것입니다.
그래서 일반적으로 우리는 이를 달성하기 위해 클로저를 사용합니다.
코드 복사 코드는 다음과 같습니다.

_uniqueID = (function() {
var id = 0;
return 함수 () {return id }
})()
alert(_uniqueID()) //0
alert(_uniqueID()) ; //1

마찬가지로 결과를 설명하기 위해 use 도메인을 사용합니다. _uniqueID 자체는 익명 함수이고 그 안에 익명 중첩 함수가 있다는 점에 유의하세요. 우리가 직접 호출하는 것은 _uniqueID()입니다. 즉, 우리가 직접 호출하는 것은 실제로 _uniqueID 내부에 중첩된 함수이며 호출 개체입니다. 자체적으로는 ID를 정의하지 않으므로 주변 호출 객체의 ID를 참조하고 이를 반환합니다. ID는 1씩 증가합니다. 실행이 완료되면 내부 중첩 함수 호출 객체가 범위 체인 밖으로 이동합니다. 주변기기 ID는 파기되지 않아서 이렇게 저장되었습니다.
헷갈리시는 분들도 계시겠지만, 함수가 실행된 후 호출 객체가 스코프 체인을 제거했다고 하지 않나요? 주변 익명 함수(function(){})()도 호출되었기 때문에 호출 개체에는 없어야 합니다. 맞습니다.
예, 호출 개체는 현재 함수가 실행된 후 참조를 종료하지만 위의 _uniqueID() 호출을 오해하지 마십시오. 직접 호출되는 주변 함수가 아니라 호출된 중첩 함수입니다. 함수 세트에는 주변 함수의 범위 체인이 포함됩니다. 따라서 호출 개체가 범위 체인을 제거하면 이 범위 체인에 있는 다른 개체의 속성에 액세스하고 변경할 수 있습니다.
클로저 자체는 이해하기 어렵지만 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다. 또한, 제한된 자격으로 인해 제가 이해한 내용이 틀릴 수도 있습니다. 발견 시 정정해 주시기 바랍니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿