Analyse détaillée des fonctions de rappel en JavaScript

Cet article vous apporte des connaissances pertinentes sur JavaScript Il présente principalement le contenu pertinent des fonctions de rappel, y compris ce qu'est une fonction de rappel, quelles sont les caractéristiques de la fonction de rappel et le problème de ce pointage dans la fonction de rappel. parlez-en ensemble. Jetez un œil, j’espère que cela aidera tout le monde.

【Recommandations associées : Tutoriel vidéo JavaScript, front-end web】

1.

Passez la fonction en paramètre à une autre fonction. Lorsque vous avez besoin d'utiliser cette fonction, rappelez et exécutez() cette fonction

La fonction de rappel est un segment de code exécutable, qui est passé en paramètre La fonction de. d'autres codes consistent à appeler facilement ce code (fonction de rappel) en cas de besoin. (Passée en paramètre à une autre fonction, la fonction en paramètre est la fonction de rappel) Compréhension : Une fonction peut être passée en paramètre à une autre fonction.

    <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 : Dans add(1, 2, print);, la fonction print est transmise à la fonction add en tant que paramètre, mais elle ne fonctionne pas immédiatement, mais var sum = num1 + num2 après l'exécution, la sortie doit être obtenue. à imprimer Cette fonction ne sera appelée que lorsque sum sera exécuté. (Ceci est passé en paramètre à une autre fonction, et la fonction en paramètre est la fonction de rappel.

Fonction de rappel anonyme :

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

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

2. Quelles sont les caractéristiques de la fonction de rappel ?

1. Ce ne sera pas exécutée immédiatement

La fonction de rappel est Lorsque les paramètres sont passés à une fonction,

seule la définition de la fonction est transmise et ne sera pas exécutée immédiatement

Comme les fonctions ordinaires, la fonction de rappel doit également transmettre le (. ) dans le nombre de fonctions appelantes. Elle ne sera exécutée que lorsqu'elle est appelée 2. La fonction de rappel est une fermeture()运算符调用才会执行。

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

La fonction de rappel est une fermeture, ce qui signifie qu'elle peut accéder aux variables définies dans son. couche externe.

3. Tapez le jugement avant l'exécution🎜🎜 Avant d'exécuter la fonction de rappel, il est préférable de confirmer qu'il s'agit d'une fonction 🎜

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

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

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

🎜3. la fonction de rappel est appelée, le contexte d'exécution de celle-ci n'est pas le contexte lorsque la fonction de rappel est définie, mais le contexte appelant Le contexte dans lequel se trouve sa fonction. l'appelant de la fonction/méthode 🎜 la plus proche 🎜, et la fonction la plus proche ici est 🎜🎜function(n ), reviendra au callback() ci-dessus À ce moment, l'appelant n'est pas obj mais window 🎜🎜. Méthode 1 pour résoudre le problème vers lequel la fonction de rappel pointe : Fonction flèche 🎜

🎜Fonction de rappel (🎜Si la fonction de rappel est une fonction normale🎜) Lorsque les paramètres sont passés dans une autre fonction, si vous ne savez pas comment pour appeler la fonction de rappel à l'intérieur de cette fonction, il y aura un problème car ceci dans la fonction de rappel ne pointe pas clairement (par exemple, dans l'exemple ci-dessus, cela ne pointe pas vers obj mais vers window Donc, si vous utilisez la fonction 🎜arrow). en tant que fonction de rappel puis passez-la en paramètre à une autre fonction, il n'y aura aucun problème d'inconnu ceci 🎜

rrreee🎜 Analyse : Une fois la fonction de rappel écrite avec la fonction flèche, ceci Le point est très clair. , c'est l'appelant de la fonction/méthode la plus proche de celle-ci ou du niveau imbriqué, voici donc obj 🎜🎜Méthode 2 pour résoudre le problème signalé par la fonction de rappel this : var self = this;🎜rrreee🎜4. à une fonction de rappel ? 🎜🎜Il y a une raison très importante - 🎜JavaScript est un langage piloté par les événements🎜 Cela signifie que 🎜JavaScript n'arrêtera pas l'exécution en cours car il veut attendre une réponse, mais continuera à le faire. s'exécute en écoutant d'autres événements. 🎜. Regardons un exemple de base : 🎜rrreee🎜 Analyse : Comme vous vous y attendiez, la fonction first est exécutée en premier, puis second. exécuté - sortie de la console : 1 2🎜🎜Mais que se passe-t-il si 🎜function first contient une sorte de code 🎜qui ne peut pas être exécuté immédiatement ? Par exemple une requête API où nous devons envoyer une requête puis attendre une réponse ? Pour simuler cette situation, nous utiliserons setTimeout, qui est une fonction JavaScript qui appelle une fonction après un certain temps. Nous retardons la fonction de 500 millisecondes pour simuler une requête API. Le nouveau code ressemble à ceci : 🎜rrreee🎜 Analyse : Ici, la fonction function(){console.log(1)} est passée en paramètre à la fonction setTimeout, car setTimeout est officiellement fourni. Il existe de nombreux programmes métier complexes dans une fonction, donc une fois la fonction function(){console.log(1)} transmise, elle peut ne pas s'exécuter immédiatement. Pour setTimeout, elle doit s'exécuter vers function(){. console.log(1) } exécutera les paramètres de la fonction. Cela signifie-t-il que le programme entier attend simplement que setTimeout s'exécute ? Non! ! ! 🎜

Le résultat d'exécution de l'ensemble du programme est : 2 1, pas le 1 2 original. Même si nous avons d'abord appelé la fonction first(), le résultat de sortie que nous avons enregistré était en second( ) code> après la fonction. <code>first() 函数，我们记录的输出结果却在 second() 函数之后。

这不是 JavaScript 没有按照我们想要的顺序执行函数的问题，而是 JavaScript 在继续向下执行 second() 之前没有等待 first()Ce n'est pas un problème de JavaScript qui n'exécute pas les fonctions dans l'ordre souhaité, mais JavaScript n'attend pas first() avant de continuer jusqu'à second() In réponse à la question de

.

Les rappels sont exactement le moyen de garantir qu'un morceau de code est exécuté avant qu'un autre morceau de code ne soit exécuté

.

5. Quelle est la relation entre les fonctions de rappel et les opérations asynchrones ? La fonction de rappel est-elle asynchrone ? Définition : Une fonction callback est considérée comme une fonction de haut niveau, une fonction de haut niveau qui est transmise en tant que paramètre à une autre fonction. L'essence de la fonction de rappel est un modèle

(un modèle pour résoudre des problèmes courants), c'est pourquoi la fonction de rappel est également appelée le

modèle de rappel.

En bref : une fonction est appelée au sein d'une autre fonction. Et peut être transmis en tant que paramètres à d’autres fonctions.

Donc :

Il n'y a aucune relation entre les fonctions de rappel et les opérations asynchrones

 ! ! !

Alors pourquoi de nombreuses opérations asynchrones ont-elles des fonctions de remplissage ? ?

Q : L'opération asynchrone que vous connaissez concerne-t-elle la fonction de rappel ? ? ? Pas vraiment.

Callback : Cela peut être davantage compris comme une sorte de logique métier. Programmation asynchrone : la séquence d'exécution du code JS

Compréhension simple :

callback, comme son nom l'indique, signifie rappeler

eg1 : Vous commandez. à emporter, et il se trouve que c'est ce que vous voulez manger. La nourriture avait disparu, vous avez donc laissé votre numéro de téléphone au propriétaire du magasin. Après quelques jours, le magasin l'a eu et le vendeur a appelé votre numéro. appelez, vous avez couru au magasin pour l'acheter. Dans cet exemple, votre numéro de téléphone est appelé fonction de rappel. Lorsque vous laissez votre numéro de téléphone au vendeur du magasin, cela s'appelle la fonction de rappel d'enregistrement. Lorsque le magasin a des marchandises plus tard, cela s'appelle l'événement associé au rappel. le commis du magasin vous appelle, cela s'appelle la fonction de rappel. Lorsque vous vous rendez au magasin pour récupérer la marchandise, cela s'appelle répondre à l'événement de rappel.

eg2 : Pour un autre exemple, vous envoyez une requête axios. Une fois la requête réussie, la fonction de rappel de réussite est déclenchée. Si la requête échoue, la fonction de rappel d'échec est déclenchée. La fonction de rappel ici ressemble plus à un outil. L'arrière-plan utilise cet outil pour vous indiquer si vous avez réussi ou échoué.

Toutes les opérations asynchrones ici n'ont rien à voir avec les rappels. La véritable opération asynchrone est la méthode then. 【Recommandations associées : Tutoriel vidéo JavaScript

, 🎜front-end web🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!