자바스크립트 익명 함수 이해(완전 버전)_javascript 기술

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

(function(){
//모두 무시 여기에서 jQuery 구현
})();
(function(){ //여기에서 jQuery의 모든 구현을 무시})()

처음 jQuery half를 접했을 때 1년 전, 저는 다른 사람들과 마찬가지로 소스 코드가 어떻게 생겼는지 보고 매우 기뻤습니다. 그런데 처음 소스코드를 봤을 때 혼란스러웠습니다. 익명 함수가 하나만 있고 실행 중인 것을 아무도 볼 수 없는데(물론 실행 중입니다...) jQuery와 같은 함수 라이브러리가 있을 수 있는 이유는 무엇입니까? 그래서 질문이 있어서 CSDN에 왔습니다. 결과적으로 지금은 많은 분들이 확실히 알고 계신 것 같아요. (나를 따라오는 분들도 많으니까요, 하하~) 익명 함수를 괄호로 묶은 다음 괄호를 사용하면 익명 함수를 즉시 실행할 수 있습니다! 정말 놀랍습니다!

헤헤! 말도 안되는 일이 너무 많습니다. 이 섹션에서 우리가 만난 jQuery 조각은 즉시 실행되는 익명 함수 세트입니다. 이 사용법은 포럼에서 열띤 논쟁을 불러일으켰습니다. 이 코드가 클로저에 속합니까? 우리는 이 질문을 염두에 두고 기본부터 시작하여 각 핵심 요소를 분석하고 우리만의 답을 찾습니다. (예, 제 답변입니다! 제 생각에는 모든 이론은 단지 형식일 뿐입니다. 응용 프로그램의 구현에 도움이 되는 한 바람직합니다. 검은 고양이와 흰 고양이, 쥐를 잡는 고양이는 좋은 고양이입니다! )

익명 함수에 대해 이야기하려면 먼저 함수 자체부터 시작해야 합니다. 함수의 정의는 다음과 같습니다.

함수는 각 입력에 고유한 출력 값을 할당하는 "규칙"입니다.

물론 이것은 단지 수학적 정의일 뿐입니다. 그러나 컴퓨터 프로그래밍 언어에서는 함수의 정의가 비슷합니다. 우리 모두는 컴퓨터의 기능이 수학적 정의의 설명과 유사하다는 것을 알고 있기 때문에 코드에 의해 설정된 논리적 연산을 통해 일부 입력 데이터를 처리하고 고유한 출력을 반환하는 코드 조합 블록 집합입니다. ——물론 입력 데이터가 비어 있거나 출력 데이터가 비어 있거나 둘 다 비어 있는 경우는 특별한 경우입니다.

다음으로 익명함수와 관련된 개념을 미리 살펴보겠습니다.

함수 선언(함수문)
함수를 사용하려면 먼저 함수의 존재를 선언해야 합니다. 함수 명령문을 사용하는 가장 일반적인 방법은 다음과 같이 함수를 정의하는 것입니다.

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

function abc(){
// 처리할 코드
}
function abc(){ // 처리할 코드 }
　물론, 함수 반환 값이 있는 경우에도 매개 변수를 사용할 수도 있습니다.

클립보드 인쇄로 일반 복사본을 보시겠습니까?
function abc(x,y){
return x y;
}
function abc(x,y){ return x y;

그러나 함수를 어떻게 정의하든 JS 인터프리터는 이를 Function 객체로 변환합니다. 예를 들어, 위의 예 중 하나에서 함수 번호를 정의하고 다음 코드를 입력하는 경우:

alert(typeof abc);// "function"
브라우저에 프롬프트 상자에서 귀하의 abc는 함수 개체입니다라는 메시지를 표시합니다. 그렇다면 Function 객체란 정확히 무엇일까요?

함수 객체
함수 객체는 JavaScript의 고유 객체입니다. 모든 함수는 실제로 Function 객체입니다. 이 측면에 대한 논의는 다음 주제 섹션으로 남겨둡니다. 먼저 Function 객체가 생성자를 직접 사용하여 새 함수를 생성할 수 있는지 살펴보겠습니다. 대답은 '예'입니다. 예:

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

var abc = new Function(" x","y","return x*y;");
alert(abc(2,3)) // "6"
var abc = new Function("x" ,"y" ,"return x*y;"); Alert(abc(2,3)); // "6"

이제 선언하는 방법을 이해하셨으리라 믿습니다. 기능. 그렇다면 익명 함수란 무엇입니까?

익명 함수 선언
이름에서 알 수 있듯이 익명 함수는 실제 이름이 없는 함수입니다. 예를 들어, 위의 예에서 함수의 이름을 제거한 다음 함수인지 여부를 판단해 보겠습니다.

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

alert(typeof function(){});// "function"
alert(typeof function(x,y){return x y;}) ;// "함수"
alert(typeof new Function("x","y","return x*y;"))// "함수"
alert(typeof function(){}); // " 함수" Alert(typeof function(x,y){return x y;});// "함수" Alert(typeof new Function("x","y","return x*y;"))/ / "함수"


우리는 그것들이 모두 함수 객체라는 것을 쉽게 알 수 있습니다. 즉, 모두 함수이지만 모두 이름이 없다는 하나의 기능을 가지고 있습니다. 그래서 우리는 이를 "익명 함수"라고 부릅니다. 그러나 '이름'이 없기 때문에 우리는 그들을 찾을 방법이 없습니다. 이는 익명 함수를 호출하는 방법에 대한 질문으로 이어집니다.

익명 함수 호출
함수를 호출하려면 해당 함수를 찾고 참조할 수 있는 방법이 있어야 합니다. 그래서 우리는 그것에 대한 이름을 찾아야 할 것입니다. 예:

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

var abc=function(x ,y){
return x y;
}
alert(abc(2,3)); // "5"
var abc=function(x,y){ return x y ; (abc(2 ,3)); // "5"

위의 작업은 실제로 함수를 다른 방식으로 정의하는 것과 동일합니다. 예를 들어 DOM 요소 이벤트 처리 함수를 설정할 때 일반적으로 이름을 지정하지 않지만 해당 이벤트 참조에 익명 함수를 지정합니다.

실제로 익명 함수를 호출하는 또 다른 방법이 있습니다. 이는 우리가 본 jQuery 단편입니다. ()를 사용하여 익명 함수를 묶은 다음 괄호 쌍(매개변수 목록 포함)을 추가합니다. 다음 예를 다시 살펴보겠습니다.

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

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

많은 사람들이 이것이 왜 그런지 궁금해 할 것입니다. 메서드를 성공적으로 호출할 수 있습니다. 모직 천? 이 애플리케이션이 이상하다고 생각하시는 분들은 아래 설명을 읽어보시기 바랍니다.

괄호의 기능을 아시나요? 괄호는 우리의 표현식 조합을 블록으로 나눌 수 있으며, 각 블록, 즉 각 괄호 쌍에는 반환 값이 있습니다. 이 반환 값은 실제로 괄호 안의 표현식의 반환 값입니다. 따라서 익명 함수를 묶기 위해 한 쌍의 괄호를 사용할 때 실제로 반환되는 것은 익명 함수의 Function 객체입니다. 따라서 한 쌍의 괄호와 익명 함수는 명명된 함수처럼 참조됩니다. 따라서 이 참조 변수 뒤에 매개변수 목록을 추가하면 일반 함수의 호출 형식이 구현됩니다.

위의 텍스트 표현이 이해가 되실지 모르겠습니다. 그래도 이해가 되지 않으신다면 다음 코드를 살펴보세요.

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

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

PS: 생성자는 객체를 생성하는 기능을 말합니다. 즉, 함수 객체가 표현하는 함수 본문입니다.

간단히 말해서 (괄호로 묶인 익명 함수)를 괄호 표현식이 반환하는 함수 개체로 이해하면 이 함수 개체에 대한 일반적인 매개 변수 목록 호출을 만들 수 있습니다. (여기서 실수를 했습니다. 함수 표현식만으로는 함수를 직접 호출할 수 없습니다. 익명 함수 괄호를 제거하려면 표현식 할당이 수반되어야 합니다. 즉, (function(){alert(1)})()는 a =function(){alert(1)}()과 동일합니다. a=를 제거할 수 없습니다. )

클로저
　클로저란 무엇인가요? 클로저(Closure)는 첫 번째 수준 함수가 존재하도록 허용하고 첫 번째 수준 함수에 정의된 자유 변수를 첫 번째 수준 함수가 해제될 때까지 해제할 수 없도록 하는 특정 프로그래밍 언어의 코드 블록을 의미합니다. 첫 번째 수준 함수 외부에 적용됩니다. 자유 변수가 해제되었습니다.

어떻게요? 보고 나면 땀이 뻘뻘 나실 텐데... 괜찮아요, 저도요(이해하지만, 표현력의 문제일 뿐이죠). 더 간단하게 설명하자면, 클로저는 실제로 함수를 객체로 처리할 수 있는 프로그래밍 언어를 의미하며 객체의 작업과 같은 작업을 이동하여 함수의 인스턴스를 정의할 수 있습니다. ) 변수이며, 이러한 변수는 함수의 인스턴스 개체가 소멸될 때까지 함수에 저장할 수 있습니다. 다른 코드 블록은 어떤 방식으로든 이러한 인스턴스(로컬) 변수의 값을 얻고 응용 프로그램을 확장할 수 있습니다.

이렇게 설명하면 더 명확해질지 모르겠습니다. 그래도 이해가 되지 않는다면 다시 단순화해 보겠습니다. 클로저는 실제로 코드를 허용하는 프로그래밍 언어에서 정의된 로컬 부분을 나타냅니다. 실행 중인 변수를 호출합니다.

이제 예를 살펴보겠습니다.

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

var abc=function(y){
var x=y;// 이것은 지역 변수입니다
return function(){
alert(x );// 이것은 클로저 기능 중 레벨 함수 지역 변수 // "5" "5"
abc();// "6" "4"
abc();// "7" "3"
alert(x);// 오류! "x"가 정의되지 않았습니다!
var abc=function(y){ var x=y;// 이것은 지역 변수입니다. return function(){ Alert(x);// 이것은 첫 번째 수준 함수 지역 변수의 x가 클로저 기능이 호출되어 이에 대해 작동합니다. Alert(y--);//참조된 매개변수 변수도 자유 변수입니다}}(5);//abc() 초기화;// "5" "5" abc( );// " 6" "4" abc();// "7" "3" Alert(x);// 오류! "x"가 정의되지 않았습니다!


이걸 보면 jQuery 코드 조각이 닫혀 있는지 알 수 있나요?

제 이해를 활용해보겠습니다. 클로저 기능을 적용할지 여부는 코드에 가장 중요한 요소인 소멸되지 않은 지역 변수가 있는지 확인해야 합니다. 그렇다면 구현이 없는 익명 함수는 클로저 기능을 적용할 수 없다는 것이 명백합니다. 하지만 익명 함수에 구현이 있으면 어떻게 될까요? 그런 다음 파괴되지 않은 지역 변수가 구현에 사용되는지 확인해야 합니다. 그렇다면 첫 번째 기사의 jQuery 코드 조각에서 JS의 어떤 기능이 사용되었는지 묻는다면? 그러면 그것은 단지 익명 함수와 익명 함수 호출일 뿐입니다. 그러나 이는 클로저의 속성을 의미하며 클로저는 언제든지 적용될 수 있습니다. 왜냐하면 JS는 이 기능을 가지고 태어났기 때문이죠! (이것은 단지 제 이해입니다. 저도 여러분의 이해를 알고 싶습니다. 소통에 오신 것을 환영합니다! 종결에 관해서는 기회가 있다면 독립적으로 다른 주제를 열어 보겠습니다!)