Deep parsing of apply, call, and bind in JS _ javascript skills

Source: Internet
Author: User
The following is an in-depth analysis of apply, call, and bind in JS. I think it is quite good. Now I will share it with you and give you a reference. Let's take a look at it together. In Javascript, Function is an object. This in the Function object is determined by the method in which the Function is called. Using apply, call and bind can change the point of this in the function object. before talking about the difference, we should summarize the similarities of the three:
1. They are all used to change the point of this object of the function.
2. The first parameter is the object to which this points.
3. You can use subsequent parameters to pass parameters.

Call method:

Syntax: call ([thisObj [, arg1 [, arg2 [, [,. argN])
Definition: call a method of an object to replace the current object with another object.
Note: The call method can be used to call 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 provided, the Global object is used as thisObj.

Apply:

Syntax: apply (thisObj, array parameter)
Definition: apply a method of an object and replace the current object with another object.
Note: If the parameter is not of the array type, a TypeError is reported.

Bind:

EcmaScript5 extends the bind method (which is not supported by IE6, 7, and 8). bind is similar to call. For example, acceptable parameters are divided into two parts, the first parameter is used as the this object in the context of the function during execution. There are two differences:
① The return value of bind is a function; ② there are also differences in the use of parameters following bind;

Let's take a look at Example 1:

function add(a, b) {  alert(a + b);}function sub(a, b) {  alert(a - b);}

For call, it can be used as follows:
Add. call (sub, 3, 1); Result 4

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

For bind, it can be used as follows:
Add. bind (sub) (3, 1); Result 4


The output results are the same, but the parameter passing usage is different;

Let's look at Example 2:

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 year" + this. age + "years old, I am" + this. work)} var jack = {name: "jack", age: '24', work: "student"} var pet = new jone (); pet. say. apply (jack, ["welcome"]) console. log (this. name)

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

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

For bind, you need:
Pet. say. bind (jack, "welcome ")()

Output console. log (this. name) and find that this. name is jack, and the context of this has changed;

The above in-depth analysis of the apply, call, and bind in JS is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for the script house.

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.