Beispielhafte Zusammenfassung der Verwendung der JS-Methoden call() und apply()

Kürzlich bin ich in JavaScript auf die Methoden call() und apply() gestoßen, und irgendwann sind diese beiden Methoden tatsächlich sehr wichtig, also lassen Sie mich zusammenfassen. Sprechen wir über die Verwendung und Unterschiede zwischen diesen beiden Methoden.

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

Gleichheit: Diese beiden Methoden haben den gleichen Effekt.

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 verweist dies immer auf das Objekt, das eine bestimmte Methode aufruft, aber wenn die Methoden call() und apply() verwendet werden, ändert sich der Sinn.

call()Beispiel für die Methodenverwendung:

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

apply()Beispiel für die Methodenverwendung:

  //例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();

Unterschied: Die Art und Weise, Parameter zu empfangen, ist unterschiedlich. Die Methode

apply() empfängt zwei Parameter, einer ist der Bereich, in dem die Funktion ausgeführt wird (this), und der andere ist das Parameterarray.
Syntax: apply([thisObj [,argArray] ]);, ruft eine Methode eines Objekts auf und ersetzt das aktuelle Objekt durch ein anderes Objekt.

Hinweis: Wenn argArray kein gültiges Array oder kein Argumentobjekt ist, wird ein
TypeError angezeigt. Wenn weder argArray noch thisObj angegeben sind, wird das globale Objekt als thisObj verwendet.

Der erste Parameter der call()-Methode ist derselbe wie der der apply()-Methode, die an die Funktion übergebenen Parameter müssen jedoch aufgelistet werden.
Syntax: call([thisObject[,arg1 [,arg2 [,...,argn]]]]);, wenden Sie eine Methode eines bestimmten Objekts an und ersetzen Sie das aktuelle Objekt durch ein anderes Objekt.

Beschreibung: 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 thisObj angegebene neue Objekt ändern Wenn der Parameter thisObj nicht bereitgestellt wird, wird das Objekt Global 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 gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Lernen aller hilfreich sein wird .

Verwandte Lernempfehlungen: Javascript-Video-Tutorial

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