Zusammenfassung der Verwendung von call() und apply() in JS

Der in diesem Artikel mit Ihnen geteilte Inhalt ist eine Zusammenfassung der Verwendung von call() und apply() in JS. Freunde in Not können sich darauf beziehen

Kürzlich bin ich in JavaScript auf die Methoden call() und apply() gestoßen. Irgendwann sind diese beiden Methoden tatsächlich sehr wichtig. Lassen Sie mich daher die Verwendung und Unterschiede dieser beiden Methoden zusammenfassen.

1. Jede Funktion enthält zwei nicht geerbte Methoden: die Methode call() und die Methode apply().

2. Ähnlichkeiten: Die Funktionen dieser beiden Methoden sind gleich.

sind alle Aufruffunktionen in einem bestimmten Bereich. Dies entspricht dem Festlegen des Werts dieses Objekts im Funktionskörper, um den Bereich zu erweitern, in dem die Funktion ausgeführt wird.

Im Allgemeinen zeigt dies immer auf das Objekt, das eine bestimmte Methode aufruft, aber wenn die Methoden call() und apply() verwendet werden, ändert sich der Sinn.

Beispiel für die Verwendung der call()-Methode:

    //例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

Beispiel für die Verwendung der apply()-Methode:

    //例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. Unterschied: Die Art und Weise, Parameter zu empfangen, ist unterschiedlich.

• Apply()-Methode empfängt zwei Parameter, einer ist der Bereich, in dem die Funktion ausgeführt wird (dies), und der andere ist das Parameterarray.

Syntax: apply([thisObj [,argArray] ]);, rufen Sie eine Methode eines Objekts auf und ersetzen Sie das aktuelle Objekt durch ein anderes Objekt.

Hinweis: Wenn argArray kein gültiges Array oder kein Argumentobjekt ist, führt dies zu einem
TypeError. Wenn weder argArray noch thisObj bereitgestellt werden, wird dies das globale Objekt sein Wird als thisObj verwendet.

• call()-Methode Der erste Parameter ist derselbe wie bei der apply()-Methode, die an die Funktion übergebenen Parameter müssen jedoch aufgelistet werden.

Syntax: call([thisObject[,arg1 [,arg2 [,...,argn]]]]);, wendet eine Methode eines Objekts an und ersetzt das aktuelle Objekt durch ein anderes Objekt.

Hinweis: Die Call-Methode kann zum Aufrufen einer Methode anstelle eines anderen Objekts verwendet werden. Die Call-Methode kann den Objektkontext einer Funktion vom ursprünglichen Kontext in das durch angegebene neue Objekt ändern thisObj. Wenn kein Parameter Provide thisObj vorhanden ist, wird das Global-Objekt für thisObj verwendet.

Verwendungsbeispiel 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

Verwendungsbeispiel 2:

    <script>
        window.firstName = "Cynthia"; 
        window.lastName = "_xie";        var myObject = {firstName:&#39;my&#39;, lastName:&#39;Object&#39;};        function getName(){
            console.log(this.firstName + this.lastName);
        }        function getMessage(sex,age){
            console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age );
        }

        getName.call(window); // Cynthia_xie
        getName.call(myObject); // myObject

        getName.apply(window); // Cynthia_xie
        getName.apply(myObject);// myObject

        getMessage.call(window,"女",21); //Cynthia_xie 性别: 女 age: 21
        getMessage.apply(window,["女",21]); // Cynthia_xie 性别: 女 age: 21

        getMessage.call(myObject,"未知",22); //myObject 性别: 未知 age: 22
        getMessage.apply(myObject,["未知",22]); // myObject 性别: 未知 age: 22

    </script>

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von call() und apply() in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!