Detaillierte Analyse von Callback-Funktionen in JavaScript

Dieser Artikel vermittelt Ihnen relevantes Wissen über JavaScript. Er stellt hauptsächlich den relevanten Inhalt von Rückruffunktionen vor, einschließlich dessen, was eine Rückruffunktion ist, welche Merkmale die Rückruffunktion hat und welches Problem damit verbunden ist Sprechen Sie gemeinsam darüber. Ich hoffe, es hilft allen.

【Verwandte Empfehlungen: JavaScript-Video-Tutorial, Web-Frontend】

1. Was ist eine Rückruffunktion?

Übergeben Sie die Funktion als Parameter an eine andere Funktion, rufen Sie diese Funktion auf und führen Sie sie aus.

Die Rückruffunktion ist ein ausführbares Codesegment, das als Parameter übergeben wird Andere Codes dienen dazu, diesen Code (Rückruffunktion) bei Bedarf bequem aufzurufen. (Als Parameter an eine andere Funktion übergeben, die Funktion als Parameter ist die Rückruffunktion) Verstehen: Eine Funktion kann als Parameter an eine andere Funktion übergeben werden.

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

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

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

Analyse: In add(1, 2, print); wird die Funktion print als Parameter an die Add-Funktion übergeben, funktioniert aber nicht sofort, sondern var sum = num1 + num2; nach der Ausführung muss die Ausgabe erfolgen soll gedruckt werden. Diese Funktion wird nur aufgerufen, wenn sum ausgeführt wird. (Dies wird als Parameter an eine andere Funktion übergeben, und die Funktion als Parameter ist die Rückruffunktion.

Anonyme Rückruffunktion:

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

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

2. Was sind die Merkmale der Rückruffunktion?

1. Dies wird nicht der Fall sein wird sofort ausgeführt

Die Callback-Funktion wird ausgeführt. Wenn Parameter an eine Funktion übergeben werden,

wird nur die Definition der Funktion übergeben und nicht sofort ausgeführt.

Wie bei normalen Funktionen muss auch die Callback-Funktion den ( übergeben. )-Operator in der Anzahl der aufrufenden Funktionen.

2 Die Callback-Funktion ist ein Abschluss, was bedeutet, dass sie auf die in ihr definierten Variablen zugreifen kann Äußere Schicht. 3. Bevor Sie die Rückruffunktion ausführen, überprüfen Sie am besten, ob es sich um eine Funktion handelt Wenn die Rückruffunktion aufgerufen wird, ist der Ausführungskontext nicht der Kontext, in dem sich die Rückruffunktion befindet. ()运算符调用才会执行。

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

Beispiel:

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

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

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

🎜Analyse: Dies zeigt auf Der Aufrufer der Funktion/Methode 🎜, die ihm am nächsten kommt 🎜, und die Funktion, die ihm am nächsten kommt, ist 🎜🎜function(n ), kehrt zum obigen Callback() zurück. Zu diesem Zeitpunkt ist der Aufrufer nicht obj, sondern window 🎜🎜 Methode 1 zur Lösung des Problems, auf das die Callback-Funktion verweist: Pfeilfunktion 🎜

🎜Callback-Funktion (🎜Wenn die Callback-Funktion eine normale Funktion ist🎜) Wenn Parameter an eine andere Funktion übergeben werden, wenn Sie nicht wissen, wie Um die Callback-Funktion innerhalb dieser Funktion aufzurufen, besteht das Problem, dass dies in der Callback-Funktion auf unklar verweist (im obigen Beispiel zeigt dies beispielsweise nicht auf obj, sondern auf window). Als Rückruffunktion und dann als Parameter an eine andere Funktion übergeben, wird es kein Problem geben, dass dies unbekannt ist 🎜

rrreee🎜 Analyse: Nachdem die Rückruffunktion mit der Pfeilfunktion geschrieben wurde, ist dies der Punkt , es ist der Aufrufer der Funktion/Methode, die ihm oder der verschachtelten Ebene am nächsten liegt, also ist hier obj 🎜🎜Methode 2, um das Problem zu lösen, auf das die Rückruffunktion hinweist: var self = this;🎜rrreee🎜4 Warum Verwenden? Zu einer Rückruffunktion? 🎜🎜Es gibt einen sehr wichtigen Grund – 🎜JavaScript ist eine ereignisgesteuerte Sprache🎜 Das bedeutet, dass 🎜JavaScript die aktuelle Ausführung nicht stoppt, weil es auf eine Antwort warten möchte 🎜 Schauen wir uns ein einfaches Beispiel an: 🎜rrreee🎜 Analyse: Wie erwartet wird zuerst die Funktion erst und dann zweite ausgeführt wird ausgeführt – Konsolenausgabe: 1 2🎜🎜Aber was ist, wenn 🎜function first eine Art Code enthält, 🎜der nicht sofort ausgeführt werden kann? Zum Beispiel eine API-Anfrage, bei der wir eine Anfrage senden und dann auf eine Antwort warten müssen? Um diese Situation zu simulieren, verwenden wir setTimeout, eine JavaScript-Funktion, die nach einer bestimmten Zeit eine Funktion aufruft. Wir verzögern die Funktion um 500 Millisekunden, um eine API-Anfrage zu simulieren. Der neue Code sieht folgendermaßen aus: 🎜rrreee🎜 Analyse: Hier wird die Funktion function(){console.log(1)} als Parameter an die Funktion setTimeout übergeben, weil setTimeout wird offiziell bereitgestellt. Es gibt viele komplexe Geschäftsprogramme in einer Funktion, daher wird die Funktion function(){console.log(1)} möglicherweise nicht sofort ausgeführt. Um setTimeout auszuführen, muss sie mit function(){ ausgeführt werden. console.log(1) } führt die Funktionsparameter aus. Bedeutet das, dass das gesamte Programm nur darauf wartet, dass setTimeout ausgeführt wird? NEIN! ! ! 🎜

Das laufende Ergebnis des gesamten Programms ist: 2 1, nicht das Original 1 2. Obwohl wir zuerst die Funktion first() aufgerufen haben, war das von uns aufgezeichnete Ausgabeergebnis in second( ) code> nach der Funktion. <code>first() 函数，我们记录的输出结果却在 second() 函数之后。

这不是 JavaScript 没有按照我们想要的顺序执行函数的问题，而是 JavaScript 在继续向下执行 second() 之前没有等待 first()Dies ist kein Problem, wenn JavaScript Funktionen nicht in der gewünschten Reihenfolge ausführt, sondern JavaScript wartet nicht auf first(), bevor es mit second() fortfährt Antwort auf

s Frage.

Rückrufe sind genau der Weg, um sicherzustellen, dass ein Code ausgeführt wird, bevor ein anderer Code ausgeführt wird

.

5. Welche Beziehung besteht zwischen Rückruffunktionen und asynchronen Operationen? Ist die Rückruffunktion asynchron? Definition: Eine Callback-Funktion wird als High-Level-Funktion betrachtet, eine High-Level-Funktion, die als Parameter an eine andere Funktion übergeben wird. Das Wesen der Callback-Funktion ist ein Muster

(ein Muster zur Lösung häufiger Probleme), daher wird die Callback-Funktion auch als

Callback-Muster bezeichnet.

Kurz gesagt: Eine Funktion wird innerhalb einer anderen Funktion aufgerufen. Und kann als Parameter an andere Funktionen übergeben werden.

Also:

Es gibt keinen Zusammenhang zwischen Rückruffunktionen und asynchronen Vorgängen

! ! !

Warum haben dann viele asynchrone Vorgänge eine Backfill-Funktion? ?

F: Ist die asynchrone Operation, die Sie kennen, mit der Funktion von Rückrufen vertraut? ? ? Nicht wirklich.

Callback: Es kann eher als eine Art asynchrone Programmierung verstanden werden: die Ausführungssequenz von JS-Code.

Einfaches Verständnis:

Callback bedeutet, wie der Name schon sagt,

eg1: Sie bestellen Zum Mitnehmen, und es war zufällig das, was Sie essen wollten, also hinterließen Sie Ihre Telefonnummer beim Ladenbesitzer, und der Verkäufer rief Ihre Nummer an Ruf an, du bist zum Laden gerannt, um es zu kaufen. In diesem Beispiel wird Ihre Telefonnummer als Rückruffunktion bezeichnet. Wenn Sie dem Verkäufer Ihre Telefonnummer hinterlassen, wird dies als Registrierungsrückruffunktion bezeichnet Der Verkäufer ruft Sie an, dies wird als Rückruffunktion bezeichnet. Wenn Sie in den Laden gehen, um die Ware abzuholen, wird dies als Reaktion auf das Rückrufereignis bezeichnet.

eg2: In einem anderen Beispiel senden Sie eine Axios-Anfrage. Nachdem die Anfrage erfolgreich war, wird die Erfolgsrückruffunktion ausgelöst, und der Anforderungsfehler löst die Fehlerrückruffunktion aus. Die Rückruffunktion ähnelt hier eher einem Tool. Der Hintergrund verwendet dieses Tool, um Ihnen mitzuteilen, ob Sie erfolgreich waren oder nicht.

Alle asynchronen Operationen hier haben nichts mit Rückrufen zu tun. Die eigentliche asynchrone Operation ist die then-Methode. 【Verwandte Empfehlungen: JavaScript-Video-Tutorial

, 🎜Web-Frontend🎜】🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse von Callback-Funktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!