Several ways of JavaScript calling function methods introducing _javascript techniques

JavaScript syntax is flexible, five or six implementations of the same function are not uncommon, and then coupled with some of the anti-human prototype inheritance and asynchronous features, it is even more confused. I often do not know the difference between call,apply, today to record, lest forget again.

In JavaScript, methods can be executed in several ways:

1.func (), this is the most direct and most common way to invoke, but also in line with the common people's thinking logic, but in some cases there are some deficiencies, explained below.

2. (function (ARG) {}) (window), anonymous method invocation, is useful when constructing namespaces, and the following parentheses correspond to the parameter one by one in the anonymous method.

3.func.bind (STH) (), the Mozilla manual mentions that bind is a new feature added to the ECMA-262 5th edition, which is listed separately as a calling because it compensates for defects that cannot bind scopes in a direct call.

4.func.call (), this is the second invocation, in which the call method is defined in the prototype of each method to execute the current method.

5.func.apply (), Call's twin brother.

Func ()

This is the most common way of calling, and is ubiquitous in any language. Func (x, y) can pass in different parameters. In some languages, such as Php,java, this call is sufficient to solve all problems. But JavaScript is a functional language, the concept of closures and a strange keyword this determines the inadequacy of this invocation approach. This should be interpreted as the scope of the current code snippet. Will change as the code executes to a different fragment, but in some cases we don't want this to be changed, such as events bound to some DOM, and we certainly don't want them to be called when this is moved to the Window object. But sometimes it does, like the following code.

Copy Code code as follows:

var a ={};
var func = function (x) {
Console.log (this);
};
A.onclick = function () {
var x = 100;
Func (x);
};
A.onclick ();

You can think of a as a link in the page, because we just want to bind the defined method to the OnClick event, rather than call it immediately, and this method has a parameter, so we need to use an anonymous method to wrap it to a onclick event. So there's a problem, this becomes the Global object window in the Func, and obviously we don't want to. This time, using Func () is not the way to call directly, so we need to bind the func outside of this to the Func method. So there is the Bind,call,apply method.

Bind

The purpose of BIND is very simple, and returns the same method that binds the this object. The above code modifies a row to implement binding this to the object on a.

Copy Code code 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 ();

This way, the onclick event will not run around like a headless fly.

Call & Apply

Call and apply should be put together because they are so alike. They all support multiple parameters, and the first argument is the this object that is about to be bound, and the second argument is their difference, and call uses a separate parameter as an entry for the calling method, and apply uses an array as an incoming parameter. Sometimes it's not like we don't want to change this object, but we want to bind it to someone else, and call and apply are good at this time. (It's not that you can't use bind, but it looks like bind is late, maybe browser compatibility is bad). Give me a chestnut:

Copy Code code as follows:

A = {
Func:function () {
This.x + 1;
},
x:0
};
b = {
A:A,
X:20
};
for (var i = 0; i < i++) {
B.a.func ();
}
Console.log (a.x);
Console.log (b.x);

Both the A and B objects above have x, we want Func to modify the corresponding x, but a direct call can only modify x in the Func scope, that is a.x. Modify the code, you can implement the modified b.x purpose

Copy Code code as follows:

A = {
Func:function () {
This.x + 1;
},
x:0
};
b = {
A:A,
X:20
};
for (var i = 0; i < i++) {
B.a.func.call (b); Bind this to B
}
Console.log (a.x);
Console.log (b.x);

This chestnut is not good, a little far-fetched, and this is a very easy to confuse the code style, there is a suitable scenario, but not everywhere is available.