JavaScript 익명 함수 학습 및 조립_javascript 팁

고대인들은 "사람에게 물고기를 가르치는 것보다 물고기 잡는 법을 가르치는 것이 낫다"고 말했습니다. 선생님이 없으면 혼자서만 "낚시"를 배울 수 있습니다. 간단하게 시작해 볼까요!
가장 친숙한 코드는 다음과 같은데 왜 이렇게 작성했는지 아시나요? 페이지에 몇 줄의 코드를 추가하는 이유는 무엇입니까? jQuery 개체가 이미 도입되었습니다.

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

(함수($){
//함수 구현 코드
})(jQuery)

이제부터 시작하겠습니다! 프로그래머는 모두 Google과 Baidu를 사용할 수 있는 방법을 알고 있습니다. 나도... 오! 이는 자바스크립트의 익명 기능인 것으로 밝혀졌습니다.

이 익명 기능은 무엇인가요? 시간을 갖고 배우십시오!
자바스크립트에서는 일반적으로 함수를 정의하는 세 가지 방법이 있습니다.
1. 함수 키워드(함수) 설명:

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

함수명(a) {
return a
}

2 . 함수 리터럴:

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

var Name = function(a){
return a;
}

3. Function() 생성자:

var Name = new Function('a','return a;')
위의 세 가지 메서드는 동일한 함수 Name을 정의합니다. 첫 번째 메서드는 가장 일반적으로 사용되는 메서드입니다. 두 함수에는 이름이 없습니다. 소위 익명 함수인가요? 아래 설명을 참고하세요!

함수 리터럴과 Function() 생성자에는 차이가 있습니다!
(1) 함수 리터럴은 익명 함수이며 구문을 통해 재귀 함수를 작성할 때 직접 호출할 수 있지만 Function() 생성자를 사용하면 그렇지 않습니다.

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

var f = functionfact(x) {
if (x < = 1)
return 1;
else
return x*fact(x-1)
}; ). 함수 () 생성자를 사용하면 런타임에 Javascript 코드를 동적으로 생성하고 컴파일할 수 있습니다. 이러한 방식은 전역 함수 eval()과 유사합니다.
(3) Function() 생성자는 함수 본문을 구문 분석하고 실행될 때마다 새 함수 객체를 생성합니다. 따라서 루프나 자주 실행되는 함수에서 Function() 생성자를 호출하는 효율성은 매우 낮습니다. 대조적으로, 함수 리터럴은 만날 때마다 다시 컴파일되지 않습니다.

(4) Function() 생성자를 사용하여 함수를 생성하면 일반적인 범위를 따르지 않습니다. 항상 최상위 함수로 실행됩니다.

코드 복사 코드는 다음과 같습니다. var y = "global"

function constructionFunction () {

var y = "local";
return new Function("return y"); // 지역 변수를 얻을 수 없습니다.
}
alert(constructFunction()() ); // 출력 "전역"


여기에는 Function 개체라는 이름도 포함되어 있습니다. Function 개체는 JavaScript의 고유 개체입니다. 따라서 위의 세 가지는 모두 함수 개체입니다.
위 내용은 다음과 같이 요약할 수 있습니다. 함수 개체는 일반적이고 관용적인 방식과 생성 방법으로 함수를 생성할 수 있으며, 함수에는 이름이 없을 수도 있습니다(익명 함수).

익명 함수에 이어 이름에서 알 수 있듯이 익명 함수는 실제 이름이 없는 함수입니다. 예를 들어 위의 예를 들어보겠습니다. 함수 이름을 제거한 후 2와 3이 동일한 함수인지 확인합니다.

코드 복사 코드는 다음과 같습니다. 다음: alert(typeof function(){}); // "함수"

alert(typeof function(a){return a;}) // "함수"

alert(typeof new Function( "a","return a;")) // "함수"


모든 반환 함수 개체입니다. 이름이 없는 것처럼 보이지만 여전히 함수입니다. 그렇다면 익명 함수를 어떻게 호출하나요?
함수를 호출하려면 해당 함수를 찾고 참조할 수 있는 방법이 있어야 합니다. 그래서 우리는 그것에 대한 이름을 찾아야 할 것입니다. 예시 2, 3에서 '이름'의 역할이 바로 이것이다. 그리고 이는 우리가 흔히 볼 수 있는 형식이기도 합니다.
여기에는 실제로 다른 방법이 있습니다. 즉, 처음에 제공된 jQuery 코드는 ()를 사용하여 익명 함수를 묶은 다음 그 뒤에 괄호 쌍(매개변수 목록 포함)을 추가하는 것입니다. 아래 코드를 살펴보겠습니다!

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

alert((function(x,y) {return x y ;})(2,3)); // "5"
alert((new Function("x","y","return x*y;"))(2,3)) ; // "6"

왜 이 메소드가 성공적으로 호출될 수 있는지 궁금해하는 사람들이 많을 것입니다. 아마도 바쁘지 않은 시간에 코드를 다시 보시면 이해가 되실 것입니다.

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

// abc에 익명 함수 개체 할당
var abc=function(x,y){return x y;};
alert((abc).constructor==(function(x,y){return x y;}).constructor); // abc 생성자는 익명 함수의 생성자와 동일합니다. 즉, 두 기능의 구현은 동일합니다.

이 애플리케이션이 여전히 이상하다고 생각된다면 온라인에서 읽은 이 설명을 살펴보세요.
괄호는 우리의 표현식 조합을 블록으로 나눌 수 있으며, 각 블록, 즉 각 괄호 쌍에는 반환 값이 있습니다. 이 반환 값은 실제로 괄호 안의 표현식의 반환 값입니다. 따라서 익명 함수를 묶기 위해 한 쌍의 괄호를 사용할 때 실제로 반환되는 것은 익명 함수의 Function 객체입니다. 따라서 괄호 쌍과 익명 함수는 명명된 함수처럼 참조됩니다. 따라서 이 참조 변수 뒤에 매개변수 목록을 추가하면 일반 함수의 호출 형식이 구현됩니다.
마지막으로 익명 함수의 코드 패턴을 살펴보겠습니다!
오류 모드: 작동하지 않으며 브라우저에서 구문 오류를 보고합니다.

function(){ 경고(1); }();
1. 함수 리터럴: 먼저 함수 개체를 선언한 다음 실행합니다.
(function(){ Alert(1); } ) ( );
2. 우선순위 표현식: 자바스크립트는 괄호 안쪽부터 바깥쪽으로 표현식을 실행하므로 괄호를 사용하여 강제로 실행할 수 있습니다. 선언된 함수 .
( function(){ Alert(2); } ( ) );
3. Void 연산자: 괄호로 묶이지 않은 단일 피연산자를 수행하려면 void 연산자를 사용하세요.
void function(){ Alert(3); }()
이 세 가지 방법은 동일하며 어떻게 생각하느냐에 따라 다릅니다.
하하! 거의 다 됐어요! 이번에는 jQuery의 처음 몇 문장이 함수 리터럴이라는 것을 깨달았습니다!
(익명 함수)(매개변수) (function($){})(jQuery);