Description of the use of call and apply in JS

The difference between JS call () and apply ()

The ECMAScript specification defines call () and apply () two methods for all functions, and the first parameter of call and apply is the function object that needs to be called, and in the function body This parameter is the value of this, and the remaining arguments are the values that need to be passed to the function. The difference between call and apply is that the value of call can be arbitrary, and the remaining value of apply must be an array.

For example: function Add (A, B) {return a + B;}

function Sub (A, b) {return a-A;}

/*apply usage

* var a1 = sub.apply (Add, [4, 2]);

*var a2= add.apply (Sub, [4, 2]);

*/

var a1 = Sub.call (Add, 4, 2);

var a2= add.call (Sub, 4, 2);

Output: a1=2 a2=6

The feeling is still intentional, more interesting is still below

JS always think he is omnipotent, since the high-level language will inherit, I JS can not be weak: JS imitation inheritance

function Fun1 () {

THIS.A = 123;

This.add = function () {return THIS.A}

}

function fun2 () {

THIS.A = 456;

}

var f1=new fun1 ()

var f2=new fun2 ()

var a = F1.add.call (F2); A the output is 456

Here is the F1 method to F2 to use, F2 can use all the methods in F1, this is not the concept of high-level language inheritance. Of course, depending on how many inheritance can be extended, multiple call can be used to achieve multiple inheritance

function Fun1 () {

This.add = function () {return THIS.A}

}

function fun2 () {

This.sub = function () {return this.a-this.b}

}

function Fun3 () {

THIS.A = 10;

this.b = 2;

Fun1.call (this);

Fun2.call (this);

}

var F3 = new Fun3 ()

Alert (F3.add ());

Alert (F3.sub ()); So, to inherit who can inherit who, I JS Invincible O (∩_∩) o haha ~

1. Method definition

Call method:
Syntax: Call ([thisobj[,arg1[, arg2[, [,. ArgN]]])
Definition: Invokes one method of an object, replacing the current object with another object.
Description
The call method can be used to invoke a method in place of another object. The call method can change the object context of a function from the initial context to a new object specified by Thisobj.
If the Thisobj parameter is not provided, then the Global object is used as the thisobj.

Apply method:
Syntax: Apply ([Thisobj[,argarray]])
Definition: A method of applying an object that 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 is used as a thisobj and cannot be passed any parameters.

2. Common examples

A

Java code

1. function Add (A, B)
2. {
3. alert (A+B);
4. }
5. function Sub (A, b)
6. {
7. Alert (A-B);
8. }
10. Add.call (Sub,3,1);

function Add (A, b) {    alert (a+b);} function Sub (A, b) {    

The meaning of this example is to replace sub,add.call (sub,3,1) = = Add (3,1) with add, so the result is: alert (4);//Note: The function in JS is actually an object, and the function name is a reference to a function object.

This is actually called Add (3, 1); However, when the Add function executes, the current context of this is not the Add object, but the sub object.

B

Java code

2. function Animal () {
4. This . Name = "Animal"    ;
6. This . ShowName = function () {
8. Alert (this. Name);
10. }
12. }
16. function Cat () {
18. This . Name = "Cat"    ;
20. }
24. var animal = New animal ();
26. var cat = new Cat ();
30. //using the call or Apply method, the ShowName () method originally belonging to the animal object is given to the object cat.   
32. //Input result is "Cat"   
34. Animal.showName.call (Cat,",");
36. //animal.showname.apply (cat,[]);   

function Animal () {      this.name = "Animal";      This.showname = function () {          alert (this.name);      }  }  function Cat () {      this.name = "Cat";  }   var animal = new Animal ();  var cat = new Cat ();    Using the call or Apply method, the ShowName () method that originally belonged to the animal object is given to the object cat.  //input result is "cat"  Animal.showName.call (Cat, ",");  Animal.showName.apply (cat,[]);

call means to put the animal method on the cat, the original cat is no ShowName () method, now is to put animal showname () method on the cat to execute, so this.name should be cat

C. Implementing inheritance

Java code

2. function Animal (name) {
4. This      . Name = name;
6. This . ShowName = function () {
8. Alert (this. Name);
10. }
12. }
16. function Cat (name) {
18. Animal.call (this, name);
20. }
24. var cat = new cat ("Black cat");
26. Cat.showname ();

function Animal (name) {         this.name = name;         This.showname = function () {             alert (this.name);         }     }        function Cat (name) {       Animal.call (this, name);   }        var cat = new Cat ("Black cat");    Cat.showname ();

Animal.call (this) means that the Animal object is used instead of the this object, so there is no Animal of all the properties and methods in Cat, and the Cat object can directly invoke the Animal method and properties.

D, multiple inheritance

Java code

2. function Class10 ()
4. {
6. This . showsub = function (A, b)
8. {
10. Alert (A-B);
12. }
14. }
18. function Class11 ()
20. {
22. This . Showadd = function (A, b)
24. {
26. alert (A+B);
28. }
30. }
34. function Class2 ()
36. {
38. Class10.call (this);
40. Class11.call (this);
42. }

function Class10 () {    this.showsub = function (A, a)    {        alert (A-B);    }} function Class11 () {    This.showadd = function (A, b)    {        alert (a+b);    }} function Class2 () {    class10.call (this);    Class11.call (this);}

It's easy to implement multiple inheritance with two call
Of course, JS inheritance There are other methods, such as the use of prototype chain, this is not part of the scope of this article, just here to illustrate the use of call. Said call, of course, and apply, these two methods are basically a meaning, the difference is that the second parameter of call can be any type, and the second argument of apply must be an array, or it can be arguments
and Callee,caller.

Description of the use of call and apply in JS