JavaScript의 콜백 함수에 대한 자세한 분석

이 글에서는 JavaScript에 대한 관련 지식을 소개합니다. 콜백 함수란 무엇인지, 콜백 함수의 특징은 무엇인지, 콜백 함수에서 이것이 가리키는 문제점은 무엇인지 등을 주로 소개합니다. 함께 이야기해 보세요. 모두에게 도움이 되기를 바랍니다.

【관련 추천: JavaScript 동영상 튜토리얼, 웹 프론트엔드】

1. 콜백 기능이란?

함수를 다른 함수에 매개변수로 전달해야 할 경우 이 함수를 콜백하고 실행()하세요.

콜백 함수는 매개변수로 전달되는 실행 가능한 코드 세그먼트입니다. 다른 코드는 필요할 때 편리하게 이(콜백 함수) 코드를 호출하는 것입니다. (다른 함수에 매개변수로 전달되며, 매개변수로 사용되는 함수는 콜백 함수입니다.) 이해: 함수는 다른 함수에 매개변수로 전달될 수 있습니다.

    <script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            callback(sum);
        }

        function print(num) {
            console.log(num);
        }

        add(1, 2, print); //3
    </script>

분석: add(1, 2, print);에서 print 함수가 add 함수에 매개변수로 전달되지만 즉시 작동하지는 않지만 실행 후 var sum = num1 + num2; to be print 이 함수는 sum이 실행될 때만 호출됩니다. (이것을 다른 함수에 매개변수로 전달하는데, 그 매개변수로서의 함수가 바로 콜백 함수입니다.

익명 콜백 함수 :

    <script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            callback(sum);
        }

        add(1, 2, function (sum) {
            console.log(sum); //=>3
        });
    </script>

2. 콜백 함수의 특징은 무엇인가요?

1. 되지 않습니다. 즉시 실행됩니다

콜백 함수는 매개변수가 함수에 전달되면

함수 정의만 전달되고 즉시 실행되지는 않습니다.

일반 함수와 마찬가지로 콜백 함수도 ( ) 연산자는 호출된 경우에만 실행됩니다. 2. 콜백 함수는 클로저입니다.()运算符调用才会执行。

2.回调函数是一个闭包

回调函数是一个闭包，也就是说它能访问到其外层定义的变量。

3.执行前类型判断

在执行回调函数前最好确认其是一个函数。

    <script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            //判定callback接收到的数据是一个函数
            if (typeof callback === 'function') {
                //callback是一个函数，才能当回调函数使用
                callback(sum);
            }
        }
    </script>

3.回调函数中this的指向问题

注意在回调函数调用时this的执行上下文并不是回调函数定义时的那个上下文，而是调用它的函数所在的上下文。

举例：

    <script>
        function createData(callback){
            callback();
        }
        var obj ={
            data:100,
            tool:function(){
                createData(function(n){
                    console.log(this,1111);  //window 1111
                })   
            }
        }
        obj.tool();
    </script>

分析：this指向是 离它最近的或者嵌套级别的 function/方法的调用者，这里离它最近的function是

function(n)，会回到上面的callback()中，这时候调用者就不是obj而是window。

 解决回调函数this指向的方法1：箭头函数

回调函数（若回调函数是普通函数时）当参数传入另外的函数时，若不知道这个函数内部怎么调用回调函数，就会出现回调函数中的this指向不明确的问题（就比如上面例子中this指向的不是obj而是window）。所以 把箭头函数当回调函数，然后作为参数传入另外的函数中就不会出现this指向不明的问题。

    <script>
        function createData(callback){
            callback();
        }
        var obj ={
            data:100,
            tool:function(){
                createData((n)=>{
                    this.data = n;
                })   
            }
        }
        obj.tool();
        console.log(obj.data); 
    </script>

 分析:回调函数用箭头函数写之后，this指向很明确，就是 离它最近的或者嵌套级别的 function/方法的调用者，所以这里是 obj 。

解决回调函数this指向的方法2：var self = this;

    <script>
        function createData(callback){
            callback(999);
        }
        var obj ={
            data:100,
            tool:function(){
                var self = this;   //这里的this指向obj，然后当一个变量取用
                createData(function(n){
                    self.data = n;
                })   
            }
        }
        obj.tool();
        console.log(obj.data);
    </script>

4.为什么要用到回调函数？

有一个非常重要的原因 —— JavaScript 是事件驱动的语言。这意味着，JavaScript 不会因为要等待一个响应而停止当前运行，而是在监听其他事件时继续执行。来看一个基本的例子：

    <script>
        function first() {
            console.log(1);
        }

        function second() {
            console.log(2);
        }

        first();
        second();
    </script>

 分析:正如你所料，first 函数首先被执行，随后 second 被执行 —— 控制台输出:1  2

但如果函数 first 包含某种不能立即执行的代码会如何呢？例如我们必须发送请求然后等待响应的 API 请求？为了模拟这种状况，我们将使用 setTimeout 콜백 함수는 클로저이므로 해당 함수에 정의된 변수에 액세스할 수 있습니다.

3. 실행 전 유형 판단

🎜. 콜백 함수를 실행하기 전에 함수인지 확인하는 것이 가장 좋습니다. 🎜

    <script>
        function first() {
            // 模拟代码延迟
            setTimeout(function () {  //所以function(){console.log(1)}是回调函数
                console.log(1);
            }, 500);
        }

        function second() {
            console.log(2);
        }

        first();
        second();
    </script>

🎜3. 콜백 함수에서 이를 가리키는 문제는 다음과 같습니다. 콜백 함수가 호출되면 이것의 실행 컨텍스트는 콜백 함수가 정의될 ​​때의 컨텍스트가 아니라 해당 함수가 위치한 컨텍스트입니다. 🎜🎜🎜예: 🎜rrreee🎜Analytic: 이것은 가장 가까운 함수/메서드 🎜의 호출자이며 여기서 가장 가까운 함수는 🎜🎜function(n)입니다. 이때 호출자는 obj가 아니라 🎜🎜입니다. 콜백 함수가 가리키는 문제를 해결하는 방법 1: 화살표 함수 🎜

🎜콜백 함수 (🎜콜백 함수가 일반 함수인 경우🎜) 매개변수가 다른 함수에 전달될 때, 어떻게 해야 할지 모르는 경우 이 함수 내에서 콜백 함수를 호출하려면 콜백 함수 내 this가 불명확함을 가리키는 문제가 있습니다(예를 들어 위의 예에서 this는 obj가 아니라 window를 가리킵니다). 따라서 🎜arrow 함수를 사용하면 콜백 함수로 사용하고 다른 함수에 매개변수로 전달하면 이를 알 수 있는 문제가 없습니다. 🎜

rrreee🎜 분석: 콜백 함수를 화살표 함수로 작성한 후에는 요점이 매우 명확해집니다. , 이는 가장 가까운 함수/메서드 또는 중첩된 수준의 호출자이므로 여기에 obj가 있습니다. 🎜🎜콜백 함수의 this가 지적한 문제를 해결하는 방법 2: var self = this;🎜rrreee🎜4. 🎜🎜매우 중요한 이유가 있습니다. 🎜JavaScript는 이벤트 중심 언어입니다🎜. 즉, 🎜JavaScript는 응답을 기다리기 때문에 현재 실행을 중지하지 않고 계속 진행합니다. 🎜. 기본 예를 살펴보겠습니다. 🎜rrreee🎜 분석: 예상한 대로 first 함수가 먼저 실행된 다음 second가 실행됩니다. 실행됨 - 콘솔 출력: 1 2🎜🎜하지만 🎜함수 첫 번째에 즉시 실행될 수 없는 일종의 코드 🎜가 포함되어 있으면 어떻게 될까요? 예를 들어 요청을 보낸 다음 응답을 기다려야 하는 API 요청이 있습니까? 이 상황을 시뮬레이션하기 위해 일정 시간이 지난 후 함수를 호출하는 JavaScript 함수인 setTimeout을 사용하겠습니다. API 요청을 시뮬레이션하기 위해 500밀리초 동안 함수를 지연합니다. 새 코드는 다음과 같습니다. 🎜rrreee🎜 분석: 여기서 function(){console.log(1)} 함수는 setTimeout 함수에 매개변수로 전달됩니다. setTimeout이 공식적으로 제공됩니다. 함수에는 복잡한 비즈니스 프로그램이 많기 때문에 function(){console.log(1)} 함수를 전달한 후 즉시 실행되지 않을 수 있습니다. setTimeout을 위해서는 function(){까지 실행해야 합니다. console.log(1) }는 함수 매개변수를 실행합니다. 이는 전체 프로그램이 setTimeout이 실행될 때까지 기다린다는 의미입니까? 아니요! ! ! 🎜

전체 프로그램의 실행 결과는 2 1입니다. 원래의 1 2가 아닙니다. 처음에 first() 함수를 호출했지만 기록된 출력 결과는 second( ) code> 함수 뒤에. <code>first() 函数，我们记录的输出结果却在 second() 函数之后。

这不是 JavaScript 没有按照我们想要的顺序执行函数的问题，而是 JavaScript 在继续向下执行 second() 之前没有等待 first()이것은 JavaScript가 원하는 순서대로 함수를 실행하지 않는 문제가 아니라 JavaScript가 second()까지 계속 진행하기 전에 first()를 기다리지 않는 것입니다.

님의 질문에 대한 답변입니다.

콜백은 다른 코드가 실행되기 전에 한 코드가 실행되도록 하는 정확한 방법입니다

.

5. 콜백 함수와 비동기 작업의 관계는 무엇인가요? 콜백 함수는 비동기식인가요? 정의: callback 함수는 상위 수준 함수, 즉 다른 함수에 매개변수 로 전달되는 상위 수준 함수로 간주됩니다. 콜백 함수의 본질은 패턴(일반적인 문제를 해결하기 위한 패턴)이므로 콜백 함수를

콜백 패턴

이라고도 합니다.

간단히 말하면: 함수는 다른 함수 내에서 호출됩니다. 그리고 다른 함수에 매개변수로 전달될 수도 있습니다.

그래서:

콜백 함수와 비동기 작업 사이에는 아무런 관계가 없습니다

! ! !

그럼 왜 많은 비동기 작업에는 백필 기능이 있나요? ?

Q: 콜백 기능에 대해 비동기 작업을 알고 있나요? ? ? 설마.

콜백: 일종의 비즈니스 논리로 이해될 수 있습니다. 비동기 프로그래밍: JS 코드의 실행 순서. 간단한 이해:

콜백은 이름에서 알 수 있듯이 다시 호출하는 것을 의미합니다. 테이크아웃했는데 먹고 싶은 거 있더라고요. 음식이 없어져서 가게 주인에게 전화번호를 남겨두었는데, 며칠 뒤에 가게 직원이 전화를 받았어요. 전화를 하고, 당신은 그것을 사러 가게로 달려갔습니다. 이 예에서는 전화번호를 콜백 함수라고 합니다. 매장 직원에게 전화번호를 남겨두면 나중에 매장에 상품이 있을 때 콜백과 관련된 이벤트라고 합니다. 매장 직원이 전화를 하는 것을 콜백 함수라고 합니다. 상품을 픽업하기 위해 매장에 갔을 때 콜백 이벤트에 응답한다고 합니다.

eg2: 또 다른 예로, 요청이 성공한 후 성공 콜백 함수가 트리거되고, 요청이 실패하면 실패 콜백 함수가 트리거되는 axios 요청을 보냅니다. 여기서 콜백 함수는 도구에 더 가깝습니다. 백그라운드에서는 이 도구를 사용하여 성공했는지 실패했는지 알려줍니다.

여기의 모든 비동기 작업은 콜백과 관련이 없습니다. 실제 비동기 작업은 then 메서드입니다.

【관련 추천:

JavaScript 비디오 튜토리얼, 웹 프론트엔드】

위 내용은 JavaScript의 콜백 함수에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!