자바스크립트 콜백 함수에 대한 자세한 설명_기본지식

콜백 함수 정의

콜백 함수는 함수 포인터를 통해 호출되는 함수입니다. 함수 포인터(주소)를 다른 함수에 매개변수로 전달하고 이 포인터가 가리키는 함수를 호출하는 데 사용되는 경우 이를 콜백 함수라고 합니다. 콜백 함수는 함수 구현자가 직접 호출하는 것이 아니라 특정 이벤트나 조건이 발생했을 때 상대방이 해당 이벤트나 조건에 대응하기 위해 호출하는 함수이다.

JavaScript에서 콜백 함수의 구체적인 정의는 다음과 같습니다. 함수 A는 매개변수(함수 참조)로 다른 함수 B에 전달되고 이 함수 B는 함수 A를 실행합니다. 함수 A가 콜백 함수라고 가정해 보겠습니다. 이름(함수 표현식)이 없으면 익명 콜백 함수라고 합니다. 따라서 콜백은 비동기식 사용에 반드시 사용되는 것은 아닙니다. 콜백은 특정 작업을 수행한 후 콜백 함수를 실행해야 하는 것과 같은 일반적인 동기(차단) 시나리오에서 자주 사용됩니다.

예
동기화(블로킹)에서 콜백을 사용하는 예는 func1 코드 실행이 완료된 후 func2를 실행하는 것이 목적입니다.

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

var func1=함수(콜백){
//뭔가를 하세요.
(콜백 && typeof(callback) === "함수") && callback();
}
func1(func2);
var func2=함수(){
}

콜백 기능 사용 사례
리소스 로딩: js 파일을 동적으로 로딩한 후 콜백 실행, iframe 로딩 후 콜백 실행, ajax 연산 콜백, 이미지 로딩 완료 후 콜백 실행, AJAX 등

DOM 이벤트와 Node.js 이벤트는 콜백 메커니즘을 기반으로 합니다(Node.js 콜백은 다중 레이어 콜백 중첩에 문제가 있을 수 있음).
setTimeout의 지연 시간은 0입니다. 이 핵은 종종 사용됩니다. settimeout에 의해 호출되는 함수는 실제로 콜백의 구현입니다

체인 호출: 체인을 사용하면 할당자(setter) 메서드(또는 값 자체를 반환하지 않는 메서드)에서는 체인 호출을 구현하기 쉽지만 getter(getter)는 구현하기가 상대적으로 어렵습니다. 연결된 호출은 이 포인터 대신 필요한 데이터를 반환하는 평가자가 필요하기 때문에 연결된 메서드를 구현하려면 콜백 함수를 사용하여 구현할 수 있습니다.

setTimeout 및 setInterval 함수 호출은 반환 값을 가져옵니다. 두 함수 모두 비동기식이므로, 즉 호출 순서가 프로그램의 기본 프로세스와 상대적으로 독립적이므로 본문에서 반환 값을 기다릴 방법이 없으며 프로그램은 반환 값이 반환될 때 중지하고 기다리지 않습니다. 그렇지 않으면 setTimeout과 setInterval의 의미가 없어지므로 return을 사용해도 의미가 없으며 콜백만 사용할 수 있습니다. 콜백의 의미는 적시에 처리할 수 있도록 타이머 실행 결과를 에이전트 기능에 알리는 것입니다.

함수도 객체입니다

콜백 함수를 이해하려면 먼저 함수의 규칙을 명확히 이해해야 합니다. JavaScript에서 함수는 이상하지만 실제로는 객체입니다. 정확하게 말하면 함수는 Function() 생성자를 사용하여 생성된 Function 객체입니다. Function 개체에는 함수의 JavaScript 코드가 포함된 문자열이 포함되어 있습니다. C나 Java에서 왔다면 이상하게 보일 수 있습니다. 코드가 어떻게 문자열일 수 있습니까? 하지만 자바스크립트에서는 이런 일이 흔합니다. 데이터와 코드의 구분이 모호합니다.

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

//이런 함수를 만들 수 있습니다
var fn = new Function("arg1", "arg2", "return arg1 * arg2;");
fn(2, 3); //6

이렇게 하면 코드를 다른 함수에 전달할 수도 있고, 일반 변수나 객체를 전달할 수도 있다는 장점이 있습니다(코드는 말 그대로 객체이기 때문입니다).

함수를 콜백으로 전달

함수를 매개변수로 전달하는 것은 쉽습니다.
​

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

함수 fn(arg1, arg2, 콜백){
var num = Math.ceil(Math.random() * (arg1 - arg2) arg2);
​ callback(num);//결과 전송
}

fn(10, 20, 함수(숫자){
console.log("콜백이 호출되었습니다! 번호: "
});//결과는 10에서 20 사이의 임의의 숫자입니다

어쩌면 번거롭거나 다소 어리석어 보일 수도 있습니다. 결과를 정상적으로 반환해 보는 것은 어떨까요? 하지만 콜백 함수를 사용해야 한다면 그렇게 생각하지 않을 수도 있습니다!

방해하지 마세요

기존 함수는 매개변수 형식으로 데이터를 입력하고 반환문을 사용하여 값을 반환합니다. 이론적으로 함수의 끝에 return 문이 있는데 구조적으로는 입력 지점과 출력 지점입니다. 이는 이해하기 더 쉽습니다. 함수는 기본적으로 입력과 출력 간의 구현 프로세스를 매핑한 것입니다.

그런데 함수 구현 과정이 너무 길면 함수 처리가 완료될 때까지 기다리나요, 아니면 비동기 처리를 위해 콜백 함수를 사용하나요? 이 경우 AJAX 요청과 같은 콜백 함수를 사용하는 것이 중요합니다. 처리를 위해 콜백 함수를 사용하면 코드는 헛되이 기다리지 않고 다른 작업을 계속 수행할 수 있습니다. 실제 개발에서는 JavaScript에서 비동기 호출이 자주 사용되며 여기서는 적극 권장됩니다!

다음은 AJAX를 사용하여 XML 파일을 로드하고 call() 함수를 사용하여 요청된 개체의 컨텍스트에서 콜백 함수를 호출하는 보다 포괄적인 예입니다.
​

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

함수 fn(url, 콜백){
var httpRequest; //XHR 생성
httpRequest = window.XMLHttpRequest ? 새로운 XMLHttpRequest() :　
　　 window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP"    ): 정의되지 않음;//IE용 기능 감지
 
httpRequest.onreadystatechange = 함수(){
If(httpRequest.readystate === 4
&& httprequest.status === 200) {// 상태 판단
​​​​​ callback.call(httpRequest.responseXML)
}
};
httpRequest.open("GET", url);
httpRequest.send();
}

fn("text.xml", function(){　　 //함수 호출
console.log(this); //이 명령문 이후 출력
});

console.log("위 콜백보다 먼저 실행됩니다."); //이 명령문이 먼저 출력됩니다

요청은 비동기식으로 처리됩니다. 즉, 요청을 시작할 때 요청이 완료되면 함수를 호출하라고 지시합니다. 실제 상황에서 onreadystatechange 이벤트 핸들러는 요청 실패 상황도 고려해야 합니다. 여기서는 xml 파일이 존재하고 브라우저에서 성공적으로 로드될 수 있다고 가정합니다. 이 예에서는 비동기 함수가 onreadystatechange 이벤트에 할당되므로 즉시 실행되지 않습니다.

결국 두 번째 console.log 문이 먼저 실행되는 이유는 요청이 완료될 때까지 콜백 함수가 실행되지 않기 때문입니다.

위의 예시는 이해하기 쉽지 않으니, 다음 예시를 살펴보세요.

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

함수 foo(){
var a = 10;
반환함수(){
        a *= 2;
         반품;                                   };   }
var f = foo();
f(); //20을 반환합니다.
f(); //40을 반환합니다.

함수가 외부에서 호출되면 변수 a에 계속 액세스할 수 있습니다. 이는 모두 JavaScript의 범위가 어휘적이기 때문입니다. 함수는 함수가 실행되는 범위가 아니라 정의된 범위(위 예에서는 foo 내부 범위)에서 실행됩니다. f가 foo에 정의되어 있는 한, foo의 실행이 종료되더라도 foo에 정의된 모든 변수에 액세스할 수 있습니다. 해당 범위는 저장되지만 반환된 함수만 이 저장된 범위에 액세스할 수 있기 때문입니다. 중첩된 익명 함수를 반환하는 것은 클로저를 만드는 가장 일반적인 방법입니다.