Exemple de résumé de l'utilisation des méthodes JS call() et apply()

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 laissez-moi résumer Parlons des utilisations et différences entre ces deux méthodes.

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

Mêmeness : Ces deux méthodes ont le même effet.

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é.

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

  //例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()Exemple d'utilisation de la méthode :

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

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 : apply([thisObj [,argArray] ]);, appelle une méthode d'un objet et remplace l'objet actuel par un autre objet.

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 sera utilisé comme thisObj. .

Le premier paramètre de la méthode call() est le même que celui de la méthode apply(), mais les paramètres passés à la fonction doivent être listés.
Syntaxe : call([thisObject[,arg1 [,arg2 [,...,argn]]]]);, applique une méthode d'un certain objet et remplace l'objet actuel par un autre objet.

Description : La méthode d'appel peut être utilisée pour appeler une méthode à la place 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. le paramètre thisObj n'est pas fourni, 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 :

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

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun .

Recommandations d'apprentissage associées : Tutoriel vidéo javascript

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!