The difference between the call () and the Apply () method in JS

Source: Internet
Author: User

If you have not touched the dynamic language, the way of thinking in a compiled language to understand JavaScript will have a magical and weird feeling, because the things that are often impossible in consciousness happen, and even feel unreasonable. If you are experiencing this feeling in a language that is free and infinitely changeable in JavaScript , then from now on, please put down your "prejudice", because this is definitely a new continent for you, let javascrip

Well, let's go to the first, understand the Javascrtipt dynamic Transformation Runtime context characteristics, this feature is mainly reflected in the application, call two methods.

Distinguish Apply,call in a word,

  FOo.call (this, Arg1,arg

Foo.call (this, arg1,arg2,arg3) = = Foo.apply(this, arguments)= = this. Foo (arg1, arg2, Arg3)

2,ARG3) = = Foo.apply (this, arguments)= = This. Foo (arg1, arg2, Arg3)

Call, Apply is a method of Function.prototype, which is implemented internally by the JavaScript engine because it belongs to Function.prototype, so each function object instance, that is, each method has a call , apply property. As a property of the method, the use of them is of course a method. These two methods are easy to confuse, because they work the same way, but only in different ways.

the same point: two methods produce The effect is exactly the same

Different points: Methods pass different parameters

What is the function of the method, and what are the parameters that the method passes?

We analyze the above Foo.call (this, arg1, Arg2, Arg3).

Foo is a method, this is a method execution context-sensitive object, arg1, Arg2, ARG3 is the parameter passed to the Foo method. Here the so-called method executes when the context-sensitive object, if there is an object-oriented programming foundation, it is good to understand that is in the class instantiation after the object of this.

In JavaScript, the code always has a context object, and the code processes the object within it. The context object is represented by the this variable, which always points to the object in which the current code is located.

To get a better grasp of what this is, for example.

  Code

Off- topic: All properties of JavaScript objects are public, not private, so you can also access the message property directly

alert (a.message);

Visible, A, Class B have a message property (object-oriented member), A has the GetMessage method to get the message, B has the Setmessage method to set the message, and the following shows the power of call.

  Create a Class B instance object

var b = new B ();
The Setmessage method of dynamically assigning B to object A, note that a does not have this method in itself!
B.setmessage.call (A, "a message ");
The message "a" is displayed below
Alert (A.getmessage ());
// give object B the GetMessage method of dynamically assigning a, note that B itself is not in this way!

This is where the power of dynamic language JavaScript call is!

is simply "out of Nothing", the object of the method can be arbitrarily assigned, and the object itself has always been without this method, note is assigned, the popular point is that the method is to lend another object's call to complete the task, the principle is that the method executes when the context object changes.

So B.setmessage.call (A, "a message"); is equivalent to using a as the context object to invoke the Setmessage method of the B object, and this process is not related to the B point, the effect is equivalent to A.setmessage ("a Message");

Because apply has the same effect as call, it can be said

Call, the role of apply is to borrow someone else's way to invoke, just like calling their own.

OK, understand the call, apply the same place-after the role, then to see their differences, read the above example, I believe you probably know.

From B.setmessage.call (A, "A's Message") is equivalent to A.setmessage ("A's message") can be seen, "a message" in call as a parameter passed,

So in apply is how to express, direct explanation is not clear, apply to combine the application scene to be 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) {    //using the call method to borrow print, parameter explicit break-through transferPrint.call ( This, A, B, C, d);    //use the Apply method to borrow print, the parameter is passed as an array,    //here directly with the JavaScript method within the arguments array itselfprint.apply ( This, arguments);    //or encapsulate an array ofprint.apply ( This, [A, B, C, d]);    }    //The "backlight script" is shown belowexample ("Back", "light", "foot", "Ben");

In this scenario, the example method, A, B, C, D, is used as the parameter for the method, and the method uses the apply, call to borrow the Print method to invoke,

The last sentence is called the example method directly, so the context object in the method is the Window object.

So, call, apply methods except for the first argument, which is the same as the context object at execution time, the other parameters of the calling method are passed to the borrowed method as arguments, and apply is two arguments, and the second parameter is passed as an array. So you can say

Call, apply method The difference is that, from the second parameter, called method parameters will be passed to the borrowed method as parameters, and apply directly put these parameters in an array and then passed, and finally the parameter list of the Borrowing method is the same.

Application Scenarios:

Call can be used when the parameter is clear, when the parameter is ambiguous, apply to arguments

// Example     print.call (window, "Back", "light", "foot", "Ben");     // the foo parameter may be multiple     function foo () {    print.apply (window, arguments);    }

The difference between the call () and the Apply () method in JS

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.