JavaScript 익명 함수 및 closures_javascript 기술에 대한 자세한 토론

1. 익명 기능
함수는 JavaScript에서 가장 유연한 개체입니다. 여기서는 익명 함수의 사용에 대해서만 설명합니다. 익명 함수: 함수 이름이 없는 함수입니다.

1.1 함수의 정의, 먼저 함수의 정의를 간략하게 소개합니다. 크게 세 가지로 나눌 수 있습니다

첫 번째 유형: 가장 일반적인 유형이기도 합니다

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

함수 double(x){
2 * x를 반환합니다.
}

두 번째 방법: 이 방법은 함수 생성자를 사용하고 매개변수 목록과 함수 본문을 모두 문자열로 처리하므로 매우 불편하므로 권장되지 않습니다.

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

var double = new Function('x', 'return 2 * x;');

세 번째 유형:

var double = function(x) { return 2* x }
"=" 오른쪽에 있는 함수는 익명 함수라는 점에 유의하세요. 함수를 생성한 후 해당 함수는 square 변수에 할당됩니다.

1.2 익명 함수 생성

첫 번째 방법은 위에서 언급한 것처럼 제곱함수를 정의하는 방법인데, 이 역시 가장 많이 사용되는 방법 중 하나입니다.

두 번째 방법:

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

(함수(x, y){
경고(xy)
})(2, 3);

여기서(첫 번째 대괄호 안에) 익명 함수가 생성되고, 두 번째 대괄호는 익명 함수를 호출하고 매개변수를 전달하는 데 사용됩니다.

2. 폐쇄
클로저를 뜻하는 영어 단어는 클로저(closure)인데, 이는 자바스크립트 지식의 매우 중요한 부분입니다. 왜냐하면 클로저를 사용하면 코드의 양을 크게 줄이고 코드를 더 명확하게 보이게 만드는 등의 작업을 할 수 있기 때문입니다. 한마디로 매우 강력합니다.

클로저의 의미: 직설적으로 말하면 클로저는 함수의 중첩입니다. 외부 함수가 실행되더라도 내부 함수는 외부 함수의 모든 변수를 사용할 수 있습니다(여기에는 JavaScript 범위 체인이 포함됩니다).

예시 1

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

함수 checkClosure(){
var str = '레인맨';
setTimeout(
           function(){ Alert(str) } //이것은 익명 함수입니다
, 2000);
}
checkClosure();

이 예제는 실행 프로세스를 주의 깊게 분석한 후에도 여전히 많은 지식 포인트가 있습니다. checkClosure 함수의 실행은 즉각적이며(아마도 0.00001밀리초만 소요될 수 있음) 변수 str이 함수 본문에 생성됩니다. checkClosure.의 경우 setTimeout의 익명 함수에 str에 대한 참조가 있으므로 checkClosure가 실행된 후에 str이 해제되지 않습니다. 2초 후 함수 본문의 익명 함수가 실행되고 str이 해제됩니다.

예제 2, 최적화된 코드

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

함수 forTimeout(x, y){
경고(xy);
}
함수 지연(x, y, 시간){
setTimeout('forTimeout(' x ',' y ')' , 시간)
}
/**
* 위의 지연 함수는 읽기도 어렵고 쓰기도 쉽지 않은데, 클로저를 사용하면 코드가 더 명확해집니다
* 함수 지연(x, y, 시간){
* setTimeout(
* 함수(){
* forTimeout(x, y)
*                                                                               *, 시간)
* }
​*/

3. 예시

익명 함수의 가장 큰 용도는 클로저(JavaScript 언어의 기능 중 하나)를 생성하는 것이며, 전역 변수의 사용을 줄이기 위해 네임스페이스를 구축할 수도 있습니다.

예 3:

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

var oEvent = {};
(함수(){
var addEvent = function(){ /*코드 구현 생략*/ };
함수 제거이벤트(){}

oEvent.addEvent = addEvent;
oEvent.removeEvent = 제거이벤트;
})();

이 코드에서 addEvent, RemoveEvent 함수는 로컬 변수이지만, 전역 변수 oEvent를 통해 사용할 수 있어 전역 변수의 사용이 대폭 줄어들고 웹 페이지의 보안이 강화됩니다. 우리는 다음 코드를 사용하고 싶습니다: oEvent.addEvent(document.getElementById('box') , 'click' , function(){});

예 4:

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

var rainman = (함수(x, y){
xy를 반환합니다.
})(2, 3);
/**
*는 다음과 같은 형식으로도 쓸 수 있습니다. 첫 번째 괄호는 읽기에만 도움이 되지만, 다음과 같은 형식은 권장되지 않습니다.
* var rainman = 함수(x, y){
* xy를 반환;
* }(2, 3);
​*/

여기에서는 변수 rainman을 만들고 익명 함수를 직접 호출하여 5로 초기화합니다. 이 작은 트릭은 때때로 매우 실용적입니다.

예 5:

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

var 외부 = null;
(함수(){
var one = 1;
함수 내부 (){
         하나 = 1;
경고(하나);
}
외부 = 내부;
})();
외부(); //2
외부(); //3
외부(); //4

이 코드의 변수 one은 (함수 내에서 정의되기 때문에) 지역 변수이므로 외부에서 접근할 수 없습니다. 하지만 여기서는 변수 1에 액세스할 수 있는 내부 함수를 만들었고 전역 변수 외부는 내부를 참조하므로 외부를 세 번 호출하면 증분 결과가 나타납니다.

4. 주목
4.1 클로저를 사용하면 내부 함수가 상위 함수의 변수를 참조할 수 있지만 변수는 최종 값입니다

예 6:

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

/**
 *
 *

 *    
• 하나

 *    
• 둘

 *    
• 세

 *    
• 하나

 *

 */

var 목록 = document.getElementsByTagName('li');
for(var i = 0 , len = listed.length ; i < len ; i ){
목록[ i ].onmouseover = function(){
경고(i)
};
}

마우스를 각

해결책 1:

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

var 목록 = document.getElementsByTagName('li');
for(var i = 0 , len = listed.length ; i < len ; i ){
(함수(색인){
목록[index].onmouseover = function(){
경고(색인)
~ })(i);
}

해결책 2:

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

var 목록 = document.getElementsByTagName('li');
for(var i = 0, len = list.length; i Lists[ i ].$$index = i; //Dom 요소의 $$index 속성을 바인딩하여 아래 첨자를 기록합니다.
목록[ i ].onmouseover = function(){
경고(this.$$index)
};
}

해결책 3:

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

함수 eventListener(목록, 인덱스){
List.onmouseover = function(){
경고(색인);
};
}
var 목록 = document.getElementsByTagName('li');
for(var i = 0 , len = listed.length ; i < len ; i ){
EventListener(목록[ i ] , i);
}

4.2 메모리 누수

클로저를 사용하면 브라우저에서 메모리 누수가 발생할 수 있습니다. 심각한 경우 브라우저가 중단될 수 있습니다. 관심이 있는 경우 http://www.jb51.net/article/57404를 참조하세요. HTM