Introduction to several ways to call function methods in Javascript_javascript skills

JavaScript syntax is flexible, and it is not uncommon to have five or six ways to implement the same function. Coupled with some anti-human prototype inheritance and asynchronous features, it becomes even more confusing. I often don't understand the difference between call and apply. I will record it today so as not to forget it again.

In JavaScript, methods can be executed in the following ways:

1.func(), this is the most direct and common calling method, and it is also in line with the thinking logic of ordinary people. However, it has some shortcomings in some cases, which will be explained below.

2. (function(arg){})(window), anonymous method call, is more useful when constructing a namespace. The parameters in the following brackets correspond to the input parameters in the anonymous method.

3.func.bind(sth)(), mozilla manual mentioned that bind is a new feature added in ECMA-262 5th Edition, which is listed separately here As a calling method, it makes up for the defect of not being able to bind the scope in direct calls.

4.func.call(), this is the second calling method. 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 calling method and can be found everywhere in any language. func(x, y) can pass in different parameters. In some languages, such as php and java, this call is enough to solve all problems. But JavaScript is a functional language, and the concept of closure and a strange keyword this determine the shortcomings of this calling method. This should be interpreted as the scope of the current code segment, which will change as the code is executed to different segments. However, in some cases we do not want this to be changed, such as events bound to some DOM, we are sure We don't want this to be transferred to the window object when they are called, but sometimes it is, such as the following code.

Copy code The code is 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 on the page. Since we just want to bind the defined method to the onclick event instead of calling it immediately, and this method has a parameter, we need to use an anonymous method. Wrap it and pass it to the onclick event of a. There is a problem. This in func becomes the global object window. Obviously we don't want this. At this time, direct calling using func() will not work, so we need to bind this outside func to the func method. So there are bind, call, and apply methods.

bind

The purpose of bind is very simple, return the same method bound to this object. Modifying one line of the above code can achieve the purpose of binding this to the a object.

Copy code The 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 mentioned together because they are so similar. They both support multiple parameters, and the first parameter is the this object that will be bound. The second parameter is the difference between them. call uses independent parameters as the input parameters of the calling method, and apply uses an array as the input parameters. . Sometimes we don't want to change this object, but we want to bind it to other objects artificially. At this time, call and apply are very useful. (It doesn’t mean that you can’t use bind, but it seems that bind appeared relatively late, and maybe the browser compatibility is not good). Give me an example:

Copy code The code is as follows:

a = {
func: function() {
This.x = 1;
          },
x: 0
};
b = {
a: a,
x: 20
};
for(var i = 0; i b.a.func();
}
console.log(a.x);
console.log(b.x);

The above a and b objects both have x. We hope that func can modify the corresponding x in a targeted manner, but direct calls can only modify x in the scope of func, that is, a.x. By modifying the code, you can achieve the purpose of modifying b.x

Copy code The code is as follows:

a = {
func: function() {
This.x = 1;
          },
x: 0
};
b = {
a: a,
x: 20
};
for(var i = 0; i b.a.func.call(b); // bind this to b
}
console.log(a.x);
console.log(b.x);

This chestnut is not well presented, it is a bit far-fetched, and it is an easily confusing coding style. It has applicable scenarios, but it is not applicable everywhere.