Example summary of JS call() and apply() method usage

Recently I encountered the call() method and apply() method in javascript, and at some point these two methods are indeed very important, so let me summarize Let’s talk about the uses and differences between these two methods.

Each function contains two non-inherited methods: call() method and apply() method.

Similar points: These two methods have the same effect.

Calling a function in a specific scope is equivalent to setting the value of this object in the function body to expand the scope in which the function runs.

Generally speaking, this always points to the object that calls a certain method, but when using the call() and apply() methods, the point of this will be changed.

call()Example of method usage:

  //例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()Example of method usage:

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

Difference: receiving The parameters are different.

The apply() method receives two parameters, one is the scope in which the function runs (this), and the other is the parameter array.
Syntax: apply([thisObj [,argArray] ]);, call a method of an object, and replace the current object with another object.

Note: If argArray is not a valid array or is not an arguments object, a
TypeError will result. If neither argArray nor thisObj is provided, the Global object will be used as thisObj.

call() method The first parameter is the same as the apply() method, but the parameters passed to the function must be listed.
Syntax: call([thisObject[,arg1 [,arg2 [,...,argn]]]]);, apply a method of a certain object and replace the current object with another object.

Description: The call method can be used to call a method instead of another object. The call method can change the object context of a function from the initial context to the new object specified by thisObj. If the thisObj parameter is not provided , then the Global object is used for thisObj.

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

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

The above is the entire content of this article, I hope it will be helpful to everyone's learning.

Related learning recommendations: javascript video tutorial

The above is the detailed content of Example summary of JS call() and apply() method usage. For more information, please follow other related articles on the PHP Chinese website!