Deep analysis of the use and difference of call and apply in JS

Source: Internet
Author: User

The most direct understanding of call and apply is inheritance.

Call and apply, and they all function to bind a function to another object to run

Format and parameter definitions for both:

Call (Thisarg [, ARG1,ARG2, ...]); Parameter list, ARG1,ARG2, ...
Apply (Thisarg [, Argarray]); Parameter array, Argarray

The this pointer within the two functions above will be assigned to Thisarg, which enables the function to run as a method of another object

When we are programming in object-oriented, we often write this:

The code is as follows Copy Code

function people (name) {
THIS.name = Name
}

people.prototype={
Food: "Fish",
Say:function () {
Console.log ("My Name are" + THIS.name + ", I Love" +this.food);
}
}


var people = new People (' www.111cn.net ');
People.say ();

The above code should be well understood, and then if we have an object:

Hugo2 = {food: "Bone"}

We do not want to redefine the say method, so we can use the people say method by call or apply:

The code is as follows Copy Code

People.say.call (Hugo2, ' Hugo ');

This is the equivalent of calling:

Hugo2.say ()//pseudo code, used only as code understanding

Using call, you can also use the above code as equivalent to the following code:

The code is as follows Copy Code

Hugo2 = {
Food: "Bone",
Say:function () {
Console.log ("My Name are" + THIS.name + ", I Love" +this.food);
}
}

Hugo2.say ();

You can see three ways to call a function:

Obj.myfunc ();
Myfunc.call (OBJ,ARG);
Myfunc.apply (obj,[arg1,arg2.]);

Summed up in the popular words: is to use other people's things, so call a

In addition, apply and call also have a role to change this point, the Internet has been a lot of explanation, Google it yourself. Saying too much is not easy to understand

The difference and usage of call and apply

There's a call and apply method in JavaScript that's basically the same, but there's a slight difference.

First look at the JS manual in the explanation of call:
Call method
Invokes one of the object's methods to replace the current object with another object.

Call ([thisobj[,arg1[, arg2[, [,. argn]]]]

Parameters
Thisobj
Options available. The object that will be used as the current object.

Arg1, Arg2, argn.
Options available. A sequence of method parameters is passed.

Description
The call method can be used to invoke 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 the thisobj parameter is not supplied, the Global object is used as a thisobj.

To be clear is to change the inner pointer of an object, that is, to change the content that this object is pointing to. This is sometimes useful in the object-oriented JS programming process.

Quote a piece of code on the Web, after running naturally understand its rationale.

  code is as follows copy code

<input Type= "text" id= "MyText"    value= "input text"
<script>
    function Obj () { This.value= "Object! ";}
    var value= "global variable";
    function Fun1 () {alert (this.value);}

    window. FUN1 ();  //global variable
    fun1.call (window); //global variable
    Fun1.call (document.getElementById (' MyText ')); //input text
    fun1.call (New OBJ ());   //Object!
</script>

The first parameter of the call function and the Apply method is the object to pass to the current object, and this within the function. Subsequent arguments are parameters that are passed to the current object.
Run the following code:

The code is as follows Copy Code
<script>
var func=new function () {this.a= "func"}
var myfunc=function (x) {
var a= "MyFunc";
alert (THIS.A);
alert (x);
}
Myfunc.call (func, "Var");
</script>

Visible Func and Var are ejected separately. Here we have an idea of the meaning of every parameter of call.

Both apply and call are the same in effect, but they differ in their parameters.
Is the same for the first parameter, but for the second argument:
Apply passes in an array of arguments, which is the combination of multiple arguments into an array, while call is passed as a call parameter (starting with the second argument).
such as Func.call (FUNC1,VAR1,VAR2,VAR3) corresponding apply is written as: Func.apply (FUNC1,[VAR1,VAR2,VAR3))

The advantage of using apply at the same time is that you can simply pass the arguments object of the current function as the second argument to apply

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.