If you have never been exposed to dynamic languages and understand JavaScript in a compiled language mindset, you will have a magical and weird feeling, because things that are often impossible in consciousness happen, and even feel unreasonable. If you encounter this feeling in the process of learning JavaScript, a free and endless language, then from the present form, please let go of your "prejudice", because this is definitely a new world for you, let JavaScript slowly melt the previous solidified programming consciousness and inject new vitality!
OK, let’s get back to the point, first understand the context characteristics of JavaScrtipt dynamically transformed runtime. This characteristic is mainly reflected in the application of the two methods of apply and call.
To distinguish apply, call in one sentence,
foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)
call and apply both belong to a method of Function.prototype. It is implemented intrinsically by the JavaScript engine. Because it belongs to Function.prototype, each Function object instance, that is, each method has a call and apply attribute. Since it is a property of a method, their use is of course aimed at the method. These two methods are easy to confuse because they have the same function, but they are used differently.
Similarities: The effects of the two methods are exactly the same
Differences: The parameters passed by the method are different
So what is the effect of the method and what are the parameters passed by the method?
Let's analyze the above foo.call(this, arg1, arg2, arg3).
foo is a method, this is a context-related object when the method is executed, arg1, arg2, and arg3 are parameters passed to the foo method. The so-called context-related object when the method is executed, if there is an object-oriented programming basis, it is easy to understand, it is this in the object after class instantiation.
In JavaScript, the code always has a context object, and the code processes it within. The context object is embodied by this variable, which always points to the object in which the current code is located.
In order to better understand what this is, give an example.
/Create a class A function A(){//The following code will be run when the class is instantiated//The execution context object at this time is this, which is the current instance object this.message = "message of a"; this.getMessage = function(){<SPAN style="WHITE-SPACE: pre"></SPAN>return this.message;<SPAN style="WHITE-SPACE: pre"></SPAN>}}//Create a Class A instance object var a = new A();//Calendate a class A instance object var a = new A();//Calendate a class instance getMessage value alert(a.getMessage());//Create a class B function B(){this.message = "message of b"; this.setMessage = function(msg){<SPAN style="WHITE-SPACE: pre"></SPAN>this.message = msg;<SPAN style="WHITE-SPACE: pre"></SPAN>}}//Create a Class B instance object var a = new B();It can be seen that classes A and B have a message attribute (toward the members mentioned in the object). A has a getMessage method to get messages, and B has a setMessage method to set messages. The following is to show the power of the call.
//Dynamic assign a setMessage method of b to object a. Note that a itself does not have this method! b.setMessage.call(a, "a's message"); //All display "a's message" alert(a.getMessage()); //Dynamic assign a getMessage method of a to object b. Note that b itself does not have this method!
This is the power of the dynamic language JavaScript call!
It's simply "creating something out of nothing". The object's methods can be assigned arbitrarily, but the object itself has never had this method. Note that it is assignment. In layman's terms, the method is to lend another object to complete the task. In principle, the context object changes when the method is executed.
Therefore, b.setMessage.call(a, "a's message"); is equivalent to using a as the context object to call the setMessage method of b object when executing, and this process has no relationship with b, and its effect is equivalent to a.setMessage("a's message");
Because the effect of apply and call is the same, it can be said that
call, apply function is to borrow other people's methods to call, just like calling one's own.
OK, after understanding the similarities between call and apply - after understanding them, let’s take a look at their differences. After looking at the above examples, I believe you know about it.
From b.setMessage.call(a, “a’s message”) is equivalent to a.setMessage( “a’s message”) it can be seen that “a’s message” is passed as a parameter in the call,
So how does it mean in apply? It’s hard to explain it clearly. Apply needs to be combined with the application scenarios to be clear at a glance. Let’s design an application scenario:
function print(a, b, c, d){alert(a + b + c + d);}function example(a, b, c, d){//Borrow print in the call method, and explicitly disperse the parameters to pass print.call(this, a, b, c, d);//Borrow print in the apply method, and the parameters are passed as an array,//Here, use the arguments array in the JavaScript method directly print.apply(this, arguments);// Or encapsulate it into an array print.apply(this, [a, b, c, d]);}//The "backlit script" example("back", "light", "foot", "this"););In this scenario, in the example method, a, b, c, d is used as parameters passed by the method, and the methods use apply and call to borrow the print method to call.
In the last sentence, since the example method is called directly, the context object in this method is a window object.
Therefore, except for the first parameter, that is, the context object is the same when executing, the other parameters of the call method will be passed to the borrowed method as parameters in turn, while apply has two parameters, and the second parameter is passed in an array. So it can be said that
The difference between call and apply methods is that starting from the second parameter, the call method parameters will be passed to the borrowed method as parameters in turn, while apply directly puts these parameters into an array and then passes them. Finally, the parameter list of the borrowed method is the same.
Application scenarios:
Call is available when the parameters are clear, and apply arguments can be used when the parameters are unclear.
//Example print.call(window, "back", "light", "foot", "this");//foo parameters may be multiple functions foo(){<SPAN style="WHITE-SPACE: pre"></SPAN>print.apply(window, arguments);}The above article deeply understands the difference between apply() and call() methods in JavaScript. It is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.