Deep analysis _javascript skill of apply,call,bind in JS

Source: Internet
Author: User

In JavaScript, a function is an object. The this point in a function object determines how the function is invoked. You can use Apply,call and bind to change the point of this in the function object, before you say the difference or summarize the similarities of the three:
1, are used to change the function of this object to point to.
2, the first argument is the object to point to.
3, all can use the subsequent parameters to pass the parameter.

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 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.

Apply

Syntax: Apply (thisobj, array parameters)
Definition: One method of applying an object, replacing the current object with another object
Note: If the parameter is not an array type, a typeerror error is reported.

Bind

The method called bind is extended in ECMASCRIPT5 (ie6,7,8 not supported), and bind is similar to call, for example, an acceptable parameter is divided into two parts, and the first argument is an object that acts as this in the context of the function at execution time. There are two different points:
The return value of the ①bind is a function; the use of the parameters behind the ② is also different;

First Look at example one:

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

For, call, you can use this:
Add.call (sub,3,1); result is 4

For, apply, can be so used;
Add.apply (sub,[3,1]); result is 4

For, bind, you can use this:
Add.bind (sub) (3,1); result is 4


You can see that the output is the same, but the reference usage is different;

Look again at example two:

function Jone (name,age,work) {
  this.name=name;
  This.age=age;
  This.work=work;
  This.say=function (msg) {
    alert (msg+), my name is "+this.name+", I Am "+this.age+" This year, I Am "+this.work"
  }
}
var jack={
  Name: "Jack", Age
  : ' Work ',
  "student"
}
var pet=new jone ();

Pet.say.apply (jack,["Welcome"])
Console.log (this.name)

For call, you need this:
Pet.say.call (Jack, "Welcome!") ")

For apply, you need this:
Pet.say.apply (jack,["Welcome!")

For bind, you need this:
Pet.say.bind (Jack, "Welcome") ()

At this time the output Console.log (this.name), found that this.name for the jack,this context has changed;

The above about JS in the in-depth analysis of the Apply,call,bind is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud habitat community.

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.