1. 콜백 함수 정의
콜백 함수는 함수 포인터를 통해 호출되는 함수입니다. 기능의 포인터 (주소)를 인수로 전달하면이 포인터가 가리키는 함수를 호출하는 데 사용될 때 콜백 함수라고합니다. 콜백 함수는 함수의 구현자가 직접 호출하지 않지만 특정 이벤트 또는 조건이 발생할 때 다른 당사자가 호출하며 이벤트 또는 조건에 응답하는 데 사용됩니다.
JavaScript에서 콜백 함수의 특정 정의는 다음과 같습니다. 함수 A는 매개 변수 (함수 참조)로 다른 함수 B로 전달 되며이 함수 B는 함수 A를 실행합니다. 함수 A를 콜백 함수라고 가정 해 봅시다. 이름 (함수 표현식)이 없으면 익명 콜백 함수라고합니다. 따라서 콜백이 반드시 비동기식에 사용되는 것은 아닙니다. 콜백은 종종 일부 작업을 실행하고 콜백 기능이 실행되는 것과 같은 일반적인 동기 (차단) 시나리오에서 사용됩니다.
예
동기화 (차단)에서 콜백을 사용하는 예는 func1 코드가 실행 된 후 func2를 실행하는 것입니다.
var func1 = function (콜백) {// 뭔가를합니다. (Callback && typeof (Callback) === "function") && callback ();} func1 (func2); var func2 = function () {}2. 콜백 함수의 경우를 사용하십시오
리소스로드 : 콜백 실행 JS 파일의 동적로드 후 콜백을 실행하고, Iframe을로드 한 후 콜백을 실행하고, AJAX 작동 콜백을로드 한 후 콜백을 실행하고, 이미지로드, AJAX 등 후에 콜백을 실행 한 후 콜백을 실행하십시오.
DOM 이벤트 및 node.js 이벤트는 콜백 메커니즘을 기반으로합니다 (Node.js 콜백에는 다층 콜백 중첩 문제가있을 수 있습니다).
Settimeout의 지연 시간은 0입니다.이 해킹은 종종 사용됩니다. settimeout이 호출하는 함수는 실제로 콜백 실시 예입니다.
체인 호출 : 체인 호출시 평가자 (Setter) 메소드 (또는 값을 반환하지 않는 메소드)에서 체인 호출을 쉽게 구현할 수 있지만 값 getter는이 포인터 대신 필요한 데이터를 반환하기 위해 값 getter가 필요하기 때문에 체인 호출을 구현하기가 비교적 어렵습니다. 체인 메소드를 구현하려면 콜백 함수를 사용하여 구현할 수 있습니다.
settimeout 및 setInterval의 함수 호출은 반환 값을 얻습니다. 두 기능 모두 비동기식이기 때문에, 즉 호출 타이밍과 프로그램의 주요 프로세스는 비교적 독립적이기 때문에, 신체의 반환 값을 기다릴 수있는 방법이 없으며, 프로그램이 열릴 때 멈추지 않고 기다리지 않을 것입니다. 그렇지 않으면 Settimeout과 SetInterval의 의미가 손실됩니다. 따라서 반환을 사용하는 것은 의미가 없으므로 콜백 만 사용할 수 있습니다. 콜백의 의미는시기 적절한 처리를 위해 타이머 실행 결과의 프록시 함수를 알리는 것입니다.
3. 기능도 객체입니다
콜백 함수를 이해하려면 먼저 함수의 규칙을 명확하게 이해해야합니다. JavaScript에서는 기능이 이상하지만 실제로는 객체입니다. 정확하게 말하면, 함수는 function () 생성자로 생성 된 함수 객체입니다. 함수 객체에는 함수의 JavaScript 코드가 포함 된 문자열이 포함되어 있습니다. C 또는 Java에서 전송 된 경우 이상하게 보일 수 있습니다. 코드는 어떻게 문자열이 될 수 있습니까? 그러나 JavaScript의 경우 이것은 매우 일반적입니다. 데이터와 코드의 차이점은 모호합니다.
// 함수는 이러한 방식으로 Var fn = new 함수 ( "arg1", "arg2", "return arg1 * arg2;"); fn (2, 3); // 6
이것의 장점 중 하나는 코드를 다른 함수로 전달하거나 일반 변수 나 객체를 전달할 수 있다는 것입니다 (코드는 문자 그대로 객체 일 뿐이므로).
콜백으로 전송 기능
함수를 매개 변수로 전달하기 쉽습니다.
함수 fn (arg1, arg2, 콜백) {var num = math.ceil (math.random () * (arg1 -arg2) + arg2); 콜백 (num); // 결과를 전달} fn (10, 20, function (num) {console.log ( "콜백 호출! num :" + num);}); // 결과는 10에서 20 사이의 임의 숫자입니다.어쩌면 이것을하는 것은 번거롭고 약간 어리석은 것처럼 보이며, 결과를 비정상적으로 돌려주지 않겠습니까? 그러나 콜백 함수를 사용해야 할 때 그렇게 생각하지 않을 수도 있습니다!
방해하지 마십시오
기존 함수는 데이터를 매개 변수로 입력하고 리턴 명령문을 사용하여 값을 반환합니다. 이론적으로는 함수의 끝에 입력 지점과 출력 지점이 있습니다. 이해하기가 더 쉽습니다. 함수는 본질적으로 입력과 출력 사이의 구현 프로세스를 매핑합니다.
그러나 기능의 구현 프로세스가 매우 길면 기능이 처리를 완료 할 때까지 기다리거나 콜백 기능을 사용하여 비동기 처리를 수행해야합니까? 이 경우 콜백 함수를 사용하는 것이 다음과 같이 중요 해집니다. 처리를 위해 콜백 함수를 사용하는 경우 코드는 비우지 않고 다른 작업을 계속 수행 할 수 있습니다. 실제 개발에서 비동기 통화는 종종 JavaScript에서 사용되며 여기에서도 적극 권장됩니다!
아래는 AJAX를 사용하여 XML 파일을로드하고 요청 된 오브젝트의 맥락에서 콜백 함수를 호출하는보다 포괄적 인 예입니다.
함수 fn (url, 콜백) {var httprequest; // XHR 작성 httpRequest = window.xmlhttprequest? new xmlhttprequest () : window.activexobject? new ActiveXobject ( "microsoft.xmlhttp") : undefined; httprequest.onreadyStateChange = function () {if (httprequest.readystate == 4 && httprequest.status == 200)에 대한 기능 감지; }}; httprequest.open ( "get", url); httprequest.send ();} fn ( "text.xml", function () {// 함수 console.log (this)를 호출합니다. Console.log ( "위의 콜백 전에 실행됩니다."); //이 명령문은 먼저 출력됩니다비동기 처리에 대한 우리의 요청은 요청을 시작할 때 완료되면 기능을 호출하도록 지시한다는 것을 의미합니다. 실제 상황에서는 OnreadyStateChange 이벤트 핸들러도 요청 실패를 고려해야합니다. 여기서는 XML 파일이 존재하며 브라우저에서 성공적으로로드 할 수 있다고 가정합니다. 이 예에서, 비동기 기능은 oneadyStateChange 이벤트에 할당되므로 즉시 실행되지 않습니다.
마지막으로, 두 번째 Console.log 문은 요청이 완료 될 때까지 콜백 함수가 실행되지 않기 때문에 먼저 실행됩니다.
위의 예는 이해하기 쉽지 않으므로 다음 예를 살펴보십시오.
함수 foo () {var a = 10; return function () {a *= 2; 반환 a; }; } var f = foo (); f (); // 반환 20.f (); // 40을 반환합니다.함수는 외부로 호출되며 여전히 변수 a에 액세스 할 수 있습니다. JavaScript의 범위가 어휘이기 때문입니다. 기능적은이 함수가 실행되는 범위가 아니라이를 정의하는 범위 (위의 예제의 FOO 내부의 범위)에서 실행됩니다. F가 FOO로 정의되는 한 FOO의 실행이 종료 되더라도 FOO에 정의 된 모든 변수에 액세스 할 수 있습니다. 범위가 저장되지만 반환 된 기능 만 저장된 범위에 액세스 할 수 있습니다. 임베디드 익명 기능을 반환하는 것이 클로저를 만드는 가장 일반적인 방법입니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.