Summary of the call () method and the Apply () method usage in JS

Original quote: 70855586

I recently encountered the call () method and the Apply () method in Jacvascript, and at some point these two methods are really important, so let me summarize the use and differences between the two methods.

1. Each function contains two non-inherited methods: The call () method and the Apply () method. 2. The same point: the two methods work the same way.

is to call a function in a specific scope, equal to the value of the this object in the body of the function to expand the scope on which the function is run.

Generally, this always points to the object that invokes a method, but when you use the call () and the Apply () method, the point of this is changed.

The call () method uses an example:

    Example 1 <script> window.color =' Red '; Document.color =' Yellow ';var S1 = {color:' Blue '};functionChangeColor() {Console.log (This.color); } changecolor.call ();Red (default pass parameter) changecolor.call (window);Red Changecolor.call (document);//yellow Changecolor.call (this); //red Changecolor.call (S1); //blue </script> //Example 2 var Pet = {words: ' ... ', speak: function (say) {Console.log (say + "+ This.words)}} Pet.speak (' speak '); //Result: Speak ... var dog = {words:' Wang '} //change the direction of this to the dog Pet.speak.call (dog, ' speak '); //Result: Speakwang                 

The Apply () method uses the example:

    Example 1    <script>        window.number = ' one ';        Document.number = ' both ';        var S1 = {number: ' three '};        function ChangeColor () {            console.log (this.number);        }        Changecolor.apply ();         One (default parameter)        changecolor.apply (window);   One        changecolor.apply (document);//two        changecolor.apply (this);     One        changecolor.apply (S1);       Three    </script>    //Example 2    function Pet (words) {        this.words = words;        This.speak = function () {            console.log (this.words)        }    }    function Dog (words) {        //pet.call ( this, words); Results: Wang       pet.apply (this, arguments);//Result: Wang    }    var dog = new Dog (' Wang ');    Dog.speak ();

　　

3. Different points: Receive parameters in different ways.

• The Apply () method receives two parameters, one is the scope of the function run (this), and the other is the parameter array.

Syntax: apply([thisObj [,argArray] ]); to invoke one of the object's methods, 2 replaces the current object with another object.

Description: If Argarray is not a valid array or is not a arguments object, it will result in a
TypeError, if none of the Argarray and Thisobj parameters are provided, then the global object will be used as the thisobj.

• Call () method The first argument is the same as the Apply () method, but the arguments passed to the function must be enumerated.

Syntax: call([thisObject[,arg1 [,arg2 [,...,argn]]]]); a method of applying an object that replaces the current object with another object.

Description: The call method can be used to invoke a method in place of another object, which can change the object context of a function from the initial context to the new object specified by Thisobj, and if the Thisobj parameter is not provided, the global object is used for thisobj.

Using 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 

Using Example 2:

<script>        window.firstname = "Cynthia";         Window.lastname = "_xie";        var myObject = {firstName: ' My ', LastName: ' Object '};        function GetName () {            Console.log (this.firstname + this.lastname);        }        function GetMessage (sex,age) {            Console.log (this.firstname + this.lastname + "Gender:" + Sex + "Age:" + age);        }        getname.call (window);//Cynthia_xie        Getname.call (myObject);//MyObject        getname.apply (window);// Cynthia_xie        getname.apply (myObject);//MyObject        getmessage.call (window, "female", +);//cynthia_xie Sex: female Age:        getmessage.apply (window,["female");//Cynthia_xie Sex: Female age:21        Getmessage.call (MyObject, "Unknown", 22);// MyObject Gender: Unknown age:22        getmessage.apply (myobject,["Unknown", X]);//MyObject Sex: Unknown age:22    </script>

　

Original quote: 70855586

The call () method and the Apply () Method usage Summary in JS