Summary of usage of call() and apply() in JS

The content of this article is a summary of the usage of call() and apply() in JS. It has certain reference value. Friends in need can refer to it

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 the use and differences of these two methods.

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

2. Similarities: The functions of these two methods are the same.

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.

Example of using the call() method:

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

Example of using the apply() method:

    //例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 . Difference: The way of receiving parameters is different.

• 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 it with 2 another object current 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, then the Global object will be used as thisObj.

• call() method The first parameter is the same as that of the apply() method, but the parameters passed to the function must be listed.

Syntax: call([thisObject[,arg1 [,arg2 [,...,argn]]]]);, Apply a method of an object to 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 there is no Provide thisObj parameter, 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 detailed content of Summary of usage of call() and apply() in JS. For more information, please follow other related articles on the PHP Chinese website!