1. 익명 함수
함수는 JavaScript에서 가장 유연한 객체입니다. 여기서 우리는 단지 익명 기능의 목적을 설명합니다. 익명 함수 : 기능 이름이없는 함수입니다.
1.1 함수의 정의. 먼저 함수의 정의를 간단히 소개하겠습니다. 대략 세 가지 방법으로 나눌 수 있습니다.
첫 번째 : 이것은 또한 가장 일반적인 것입니다
코드 사본은 다음과 같습니다.
함수 이중 (x) {
반환 2 * x;
}
두 번째 방법 :이 방법은 매개 변수 목록과 기능 본체를 문자열로 사용하는 함수 생성자를 사용합니다. 이는 매우 불편하고 권장되지 않습니다.
코드 사본은 다음과 같습니다.
var double = new 함수 ( 'x', 'return 2 * x;');
세 번째 유형 :
var double = function (x) {return 2* x; }
"="의 오른쪽에있는 함수는 익명 함수입니다. 함수를 만들면 함수가 변수 제곱에 할당됩니다.
1.2 익명 함수 생성
첫 번째 방법 : 위에서 언급 한 제곱 함수를 정의하며 가장 일반적으로 사용되는 방법 중 하나입니다.
두 번째 방법 :
코드 사본은 다음과 같습니다.
(기능 (x, y) {
경고 (x + y);
}) (23);
여기서 익명 함수가 생성되고 (첫 번째 브래킷에서) 두 번째 브래킷은 익명 함수를 호출하고 매개 변수를 전달하는 데 사용됩니다.
2. 폐쇄
클로저를위한 영어 단어는 폐쇄입니다. 폐쇄를 사용하면 코드의 양을 크게 줄이고 코드를 더 명확하게 보이게 할 수 있기 때문에 JavaScript의 매우 중요한 부분입니다. 간단히 말해서 기능은 매우 강력합니다.
폐쇄의 의미 : 무뚝뚝하게 말하면 폐쇄는 중첩 기능입니다. 내부 함수는 외부 기능이 실행 된 경우에도 외부 기능의 모든 변수를 사용할 수 있습니다 (이는 JavaScrip 체인과 관련이 있습니다).
예 1
코드 사본은 다음과 같습니다.
함수 checkClosure () {
var str = 'Rain-Man';
settimeout (
function () {alert (str); } // 이것은 익명 기능입니다
, 2000);
}
CheckClosure ();
이 예는 매우 간단 해 보입니다. 실행 프로세스를 신중하게 분석 한 후에도 여전히 많은 지식 포인트가 있습니다. 체크 무늬 함수의 실행은 순간적 일 수 있습니다 (아마도 0.00001 밀리 초만 걸렸을 수도 있음). CheckClosure가 실행 된 후 STR은 해제되지 않습니다. Settimeout의 익명 함수는 STR에 대한 참조가 있기 때문입니다. STR은 2 초 후에 만 해제됩니다.
예 2, 코드 최적화
코드 사본은 다음과 같습니다.
기능 Fortimeout (x, y) {
경고 (x + y);
}
함수 지연 (x, y, time) {
settimeout ( 'Fortimeout (' + x + ',' + y + ')', 시간);
}
/**
* 위의 지연 기능은 읽기가 매우 어렵고 쓰기가 쉽지 않지만 클로저를 사용하면 코드가 더 명확해질 수 있습니다.
* 함수 지연 (x, y, time) {
* settimeout (
* 기능(){
* Fortimeout (X, Y)
*}
* , 시간);
*}
*/
3. 예를 들어보세요
익명 기능의 가장 큰 사용은 클로저 (JavaScript 언어의 기능 중 하나)를 생성하고 또한 전역 변수의 사용을 줄이기 위해 네임 스페이스를 구축하는 것입니다.
Example 3:
코드 사본은 다음과 같습니다.
var oevent = {};
(기능(){
var addevent = function () { / *코드의 구현은 생략 * /};
함수 removeEvent () {}
oevent.addevent = addevent;
oevent.removeEvent = removeEvent;
}) ();
이 코드에서 addevent 및 removeEvent 함수는 둘 다 로컬 변수이지만 글로벌 변수 Oevent를 통해 사용할 수 있으며, 이는 전역 변수의 사용을 크게 줄이고 웹 페이지의 보안을 향상시킵니다. 이 코드를 사용하려고합니다 : Oevent.addevent (document.getElementById ( 'box'), 'click', function () {});
Example 4:
코드 사본은 다음과 같습니다.
var rainman = (함수 (x, y) {
x + y를 반환합니다.
}) (23);
/**
* 첫 번째 괄호는 우리가 읽는 데 도움이되므로 다음 형식으로 작성할 수도 있지만 다음 작성 형식은 권장되지 않습니다.
* var rainman = function (x, y) {
* 반환 x + y;
*} (23);
*/
여기서 우리는 변수 레인맨을 생성하고 익명 함수를 직접 호출하여 5로 초기화합니다. 이 트릭은 때때로 매우 실용적입니다.
5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제 5 : 예제.
코드 사본은 다음과 같습니다.
var 외부 = null;
(기능(){
var one = 1;
함수 내부 () {
하나 += 1;
경고 (하나);
}
외부 = 내부;
}) ();
밖의(); // 2
밖의(); // 3
밖의(); // 4
이 코드의 변수는 로컬 변수 (함수 내에서 정의되기 때문에)이므로 외부는 액세스 할 수 없습니다. 그러나 여기서 우리는 변수에 액세스 할 수있는 내부 함수를 만듭니다. 또한 외부에서 내부에서 글로벌 변수를 참조하므로 외부로의 세 번의 호출이 증분 결과를 나타냅니다.
4.주의를 기울이십시오
4.1 폐쇄는 내부 층 함수가 상위 함수의 변수를 참조 할 수 있지만 변수는 최종 값입니다.
예제 6 :
코드 사본은 다음과 같습니다.
/**
* <body>
* <ul>
* <li> one </li>
* <li> 둘 </li>
* <li> 세 </li>
* <li> one </li>
* </ul>
*/
var lists = document.getElementsByTagName ( 'li');
for (var i = 0, len = lists.length; i <len; i ++) {
목록 [i] .onmouseover = function () {
경고 (i);
};
}
마우스가 각각 <li & rt를 통해 움직일 때; 요소, 우리가 기대하는 요소 첨자 대신 항상 4 팝업. 이게 왜? 예방 조치가 논의되었습니다 (최종 가치). 분명히이 설명은 너무 간단합니다. 마우스 오버 이벤트가 청취 함수를 호출 할 때, 먼저 익명 함수 내부 (function () {alert (i);}) 내부에 정의되어 있는지 확인하고 결과는 정의되지 않았다. 따라서 위쪽으로 보이고 검색 결과는 정의되었고 i의 값은 4 (루프 후 i의 값)입니다. 결국 각 팝업은 4입니다.
Solution 1:
코드 사본은 다음과 같습니다.
var lists = document.getElementsByTagName ( 'li');
for (var i = 0, len = lists.length; i <len; i ++) {
(기능 (색인) {
목록 [index] .onmouseOver = function () {
경고 (색인);
};
})(나);
}
Solution 2:
코드 사본은 다음과 같습니다.
var lists = document.getElementsByTagName ( 'li');
for (var i = 0, len = lists.length; i <len; i ++) {
목록 [i]. $$ index = i; // dom 요소에서 $$ 색인 속성을 바인딩하여 색인을 기록합니다.
목록 [i] .onmouseover = function () {
경고 (이. $$ index);
};
}
해결책 3 :
코드 사본은 다음과 같습니다.
함수 EventListener (목록, 색인) {
list.onmouseOver = function () {
경고 (색인);
};
}
var lists = document.getElementsByTagName ( 'li');
for (var i = 0, len = lists.length; i <len; i ++) {
EventListener (목록 [i], i);
}
4.2 메모리 누출
클로저를 사용하면 브라우저의 메모리 누출이 발생하기가 매우 쉽습니다. 심한 경우 브라우저가 죽을 것입니다. 관심이 있으시면 http://www.vevb.com/article/57404.htm을 참조하십시오