Several methods of calling functions using Javascript are introduced.

Several methods of calling functions using Javascript are introduced.

Javascript syntax is flexible. It is not uncommon to have five or six implementation methods for the same function. In addition, some anti-human prototype inheritance and asynchronous features make it even more confusing. I often don't know the difference between call and apply. I will record it today to avoid forgetting it.

In javascript, the method can be executed in the following ways:

1. func (), which is the most direct and common method of calling and conforms to the thinking logic of ordinary people. However, in some cases, there are some shortcomings, which will be explained below.

2. (function (arg) {}) (window): anonymous method call. It is useful when constructing a namespace. The parameters in the brackets below correspond to the input parameters in the anonymous method one by one.

3. func. bind (something) (), which is mentioned in the mozilla manual as a new feature in ECMA-262 5th Edition, it is listed separately as a call method because it makes up for the defect that the scope cannot be bound in the direct call.

4. func. call () is the second call method. The call method is defined in the prototype of each method to execute the current method.

5. func. apply (), call the twins.

Func ()

This is the most common call method, which can be seen everywhere in any language. Func (x, y) can input different parameters. In some languages, such as php and java, such calls can solve all problems. However, javascript is a functional language. The concept of closures and a strange keyword, this, determine the insufficiency of this call method. This should be interpreted as the scope of the current Code segment, which will change as the code runs into different segments, but in some cases we do not want this to be changed, for example, for events bound to some dom, we certainly do not want this to be transferred to the window object when they are called, but sometimes this is true, and then compare it with the following code.
Copy codeThe Code is as follows:
Var a = {};
Var func = function (x ){
Console. log (this );
};
A. onclick = function (){
Var x = 100;
Func (x );
};
A. onclick ();

We can think of a as a link in the page, because we just want to bind the defined method to The onclick event, instead of calling it immediately, and this method has a parameter, therefore, we need to use an anonymous method to package the onclick event that is passed to. In this case, the problem occurs. this in func becomes the Global Object window, which is obviously not expected. At this time, the direct call method like func () won't work, so we need to bind this outside of func to the func method. So we have the bind, call, and apply methods.

Bind

The purpose of bind is very simple. Return the same method bound to this object. The code above modifies a line to bind this to object.
Copy codeThe Code is as follows:
Var a = {};
Var func = function (x ){
Console. log (this );
};
A. onclick = function (){
Var x = 100;
Func. bind (this) (x); // bind here
};
A. onclick ();

In this way, this Of The onclick event will not run around like a headless fly.

Call & apply

Call and apply should be put together, because they are so similar. They all support multiple parameters, and the first parameter is the this object to be bound, and the second parameter is their difference. call uses independent parameters as the input parameters for calling methods, apply uses an array as the input parameter. Sometimes we don't want to change this object, but want to manually bind it to another object. At this time, call and apply are very useful. (This does not mean that bind cannot be used, but it seems that bind appears late, And the browser compatibility may be poor ). Example:
Copy codeThe Code is as follows:
A = {
Func: function (){
This. x + = 1;
},
X: 0
};
B = {
A:,
X: 20
};
For (var I = 0; I <10; I ++ ){
B. a. func ();
}
Console. log (a. x );
Console. log (B. x );

The above objects a and B both have x. We hope that func can modify the corresponding x accordingly, but direct calls can only modify the x in the func scope, that is, a. x. Modify the code to modify B. x.
Copy codeThe Code is as follows:
A = {
Func: function (){
This. x + = 1;
},
X: 0
};
B = {
A:,
X: 20
};
For (var I = 0; I <10; I ++ ){
B. a. func. call (B); // bind this to B
}
Console. log (a. x );
Console. log (B. x );

This is not a good question, and it is a little far-fetched. It is also a very confusing code style, applicable in some scenarios, but not everywhere.