Résumé de l'utilisation de call() et apply() dans JS

Le contenu partagé dans cet article est un résumé de l'utilisation de call() et apply() dans JS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Récemment, j'ai rencontré la méthode call() et la méthode apply() en JavaScript, et à un moment donné, ces deux méthodes sont en effet très importantes, alors permettez-moi de résumer l'utilisation et les différences de ces deux méthodes.

1. Chaque fonction contient deux méthodes non héritées : la méthode call() et la méthode apply().

2. Similitudes : Les fonctions de ces deux méthodes sont les mêmes.

appellent tous des fonctions dans une portée spécifique, ce qui équivaut à définir la valeur de cet objet dans le corps de la fonction pour étendre la portée dans laquelle la fonction s'exécute.

De manière générale, cela pointe toujours vers l'objet qui appelle une certaine méthode, mais lors de l'utilisation des méthodes call() et apply(), le but de ceci sera modifié.

Exemple d'utilisation de la méthode call() :

    //例1
    <script>
        window.color = &#39;red&#39;;
        document.color = &#39;yellow&#39;;        var s1 = {color: &#39;blue&#39; };        function changeColor(){
            console.log(this.color);
        }

        changeColor.call();         //red (默认传递参数)
        changeColor.call(window);   //red
        changeColor.call(document); //yellow
        changeColor.call(this);     //red
        changeColor.call(s1);       //blue

    </script>    //例2
    var Pet = {
        words : &#39;...&#39;,
        speak : function (say) {
            console.log(say + &#39;&#39;+ this.words)
        }
    }
    Pet.speak(&#39;Speak&#39;); // 结果：Speak...

    var Dog = {
        words:&#39;Wang&#39;
    }    //将this的指向改变成了Dog
    Pet.speak.call(Dog, &#39;Speak&#39;); //结果： SpeakWang

Exemple d'utilisation de la méthode apply() :

    //例1
    <script>
        window.number = &#39;one&#39;;
        document.number = &#39;two&#39;;        var s1 = {number: &#39;three&#39; };        function changeColor(){
            console.log(this.number);
        }

        changeColor.apply();         //one (默认传参)
        changeColor.apply(window);   //one
        changeColor.apply(document); //two
        changeColor.apply(this);     //one
        changeColor.apply(s1);       //three

    </script>    //例2
    function Pet(words){
        this.words = words;        this.speak = function () {
            console.log( this.words)
        }
    }    function Dog(words){
        //Pet.call(this, words); //结果： Wang
       Pet.apply(this, arguments); //结果： Wang
    }    var dog = new Dog(&#39;Wang&#39;);
    dog.speak();

3. Différence : La manière de recevoir les paramètres est différente. La méthode

• apply() reçoit deux paramètres, l'un est la portée dans laquelle la fonction s'exécute (this) et l'autre est le tableau de paramètres.

Syntaxe : , appelle une méthode d'un objet et remplace l'objet actuel par un autre objet. apply([thisObj [,argArray] ]);

Remarque : Si argArray n'est pas un tableau valide ou n'est pas un objet arguments, une TypeError en résultera. Si ni argArray ni thisObj ne sont fournis, alors l'objet Global le sera. utilisé comme thisObj.

• Méthode call() Le premier paramètre est le même que la méthode apply(), mais les paramètres passés à la fonction doivent être listés.

Syntaxe : , applique une méthode d'un objet et remplace l'objet actuel par un autre objet. call([thisObject[,arg1 [,arg2 [,...,argn]]]]);

Explication : La méthode d'appel peut être utilisée pour appeler une méthode au lieu d'un autre objet. La méthode d'appel peut changer le contexte d'objet d'une fonction du contexte initial au nouvel objet spécifié par. thisObj. S’il n’y a pas de paramètre Provide thisObj, alors l’objet Global est utilisé pour thisObj.

Exemple d'utilisation 1 :

    function add(c,d){
        return this.a + this.b + c + d;
    }    var s = {a:1, b:2};
    console.log(add.call(s,3,4)); // 1+2+3+4 = 10
    console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14

Exemple d'utilisation 2 :

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!