The use of BIND, call, and apply functions

Source: Internet
Author: User

There are 4 modes of function calls in JS : method invocation , normal function call , constructor function call ,Apply/call call .
At the same time, no matter what function call except for the formal parameters that you define when you declare, you will automatically add 2 parameters , respectively, this and arguments.
arguments does not involve the above 3 functions, so this is the only one here. The value of this, in the above 4 invocation mode, will bind different values, respectively. Say, separately:
Method Invocation :
It's good to understand that a function is a property of an object, such as

var a = {        0,        function(xx) {                        this. v = xx;        }} A.F (5);

At this point, the this in the above function binds to this object a. So this.v can take the property of Object a v.

normal function calls:
Still looking at the code

function F (xx) {            this. x= xx;} F (5);

At this point, the this in the function F is bound to the global object, in the case of a browser-run interpreter, typically a window object. So here this.x access is actually window.x , of course, if window does not have x attribute, then you write so, according to JS The Pit-daddy syntax is to add an x attribute to the window object and assign a value.

constructor Function Call :
The constructor has always been I think is JS in the most pit-father part, because it and JS originally designed based on the prototype-oriented implementation of the way out of tune, as if deliberately to cater to everyone has been other class-based face objects implemented to spoil the habit.
If you call with the new keyword in front of a function, JS creates a prototype property that is a new object for this function, and when this function is called, the Bind to this new object. Of course the new keyword will also change the behavior of the return statement, but it will not be discussed here. Look at the code

function A (xx) {            this. m = xx;}  var New A (5);

There is no difference between this function and normal calling function, except that the function name is preceded by the keyword   new just so, this  The binding is no longer the global object mentioned earlier, but the new object created here, so it's dangerous to say this way, because you don't know if the function is ready to be used as a constructor or as a general function. So we can see that in   jslint  , it will ask you to write all the constructors, that is, once it finds that you used the   new   keyword, Then the first letter of the function must be capitalized, so that by the letter of the first letter of the way to distinguish, I personally have only one view: Pit Dad:)

Apply/call Call:
we know that in   JS  , the function is actually an object, Then the function can naturally have its own method, a bit around, in JS  , each function has a common   prototype  --  Function , which comes with several properties and methods, including the confusing   bind , call , Apply   method. First say   Apply   method, which lets us construct a parameter array to pass to the function, and can set the value of   this  . This is its most powerful place, the above 3 function call way, you can see, this  are automatically bound, no way to set by you, when you want to set, you can use the  apply () The . The apply   function receives 2 parameters, the first of which is passed to the function to bind   this  , and the second is an array of arguments. See Code

function A (xx) {            this. B = xx;}  var o = {};a.apply (o, [5]); alert (a.b);     // undefinedalert (O.B);    // 5

is not very magical, function a actually can give o plus attribute value. Of course, if you pass nullfor the first argument of apply , the this pointer will still bind the global object in function a .

The call () method is similar to the apply () method, and they all exist to change the binding of this, what is the difference between call ( ) and apply () ? As far as I am concerned, there is no bird difference ... Joke! Just said, above apply () receives two parameters, the first one is bound this value, the second is an array of parameters, note that it is an array, you want to pass to the function of all the parameters are placed in the array, and then apply () the function will automatically help you to expand the array when the function is called. and call () , its first parameter is also bound to the value of this, but the subsequent acceptance is an indeterminate parameter, and is no longer an array, that is, you can give the function as usual to the parameters of one pass. So if there's any difference, it looks like this.

function A (xx, yy) {        alert (xx, yy);        Alert (this);        alert (arguments);} A.apply (null, [5, +]); A.call (null, 5, 55);

That's all.

Finally, the bind () function, either call () or apply () is called immediately to the corresponding function, and bind () will not, bind () A new function is generated, and thebind () function's arguments are consistent with call () , the first parameter is the value of the binding this, followed by an indeterminate argument passed to the function. The new function generated by bind () returns, when you want to tune it, and look at the code to see

var m = {       "x": 1}; function foo (y) {    alert (this. x+ y);} Foo.apply (M, [55); var foo1 = Foo.bind (M, 5); Foo1 ();

Finally, a spit slot, you want to define a function in JS , so you will write:

function Jam () {};
Actually, this is JSa syntactic sugar, which is equivalent to:
var function () {};

And then you want to execute this function, the brain hole opens up so you'll write:

function Jam () {} ();

But this write error, in fact, this method is not wrong, because it is really a function of JS support expression, but at the same time JS also stipulates that the function begins with the statement is considered a functional statement, And after the function statement is certainly does not take (), therefore only then the error, therefore the intelligent person thought out, adds the pair of parentheses to be possible. And that's how it turns out:

(function Jam () {} ());

This defines a function and executes it as well.

The use of BIND, call, and apply functions

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.