Detailed explanation of the source and contact differences between call, apply, and bind methods in Javascript with examples

The origin of the call/apply/bind method

First of all, when using the call, apply, and bind methods, it is necessary for us to know where these three methods come from? Why can these three methods be used?

The three methods call, apply, and bind are actually inherited from Function.prototype and are instance methods.

 console.log(Function.prototype.hasOwnProperty('call')) //true
 console.log(Function.prototype.hasOwnProperty('apply')) //true
 console.log(Function.prototype.hasOwnProperty('bind')) //true

In the above code, true is returned, indicating that the three methods are inherited from Function.prototype. Of course, ordinary objects, functions, and arrays all inherit the three methods in the Function.prototype object, so these three methods can be used in objects, arrays, and functions.

Object binding callback function

If this object is used in the callback function, then this object will point to the DOM object, which is the button object. If you want to solve the problem of this pointing in the callback function, you can use the following method.

var o = {
 f: function() {
 console.log(this === o);
 }
 }
 $('#button').on('click', function() {
 o.f.apply(o);
 //或者 o.f.call(o);
 //或者 o.f.bind(o)();
 });

After clicking the button, the console will display true. Since the apply method (or call method) not only binds the object where the function is executed, but also executes the function immediately (while the bind method does not execute immediately, please note the difference), the binding statement has to be written in a function body.

The connection and difference between call, apply and bind methods

In fact, these three methods are used to specify the problem pointed by this inside the function. They are almost the same, but there are differences in form. Readers can try to implement the above examples in three ways.

To summarize the call, apply, and bind methods:

a: The first parameter specifies the pointer of this inside the function (the scope where the function is executed), and then This function is called according to the specified scope.

b: You can pass parameters when calling the function. The call and bind methods need to be passed in directly, while the apply method needs to be passed in in the form of an array.

c: The call and apply methods execute the function immediately after the call, while the bind method does not execute immediately and the function needs to be executed again. It smells a bit closed.

D: Changing the pointing of this object not only involves the call, apply, and bind methods, but you can also use the that variable to fix the pointing of this.

The above is the detailed content of Detailed explanation of the source and contact differences between call, apply, and bind methods in Javascript with examples. For more information, please follow other related articles on the PHP Chinese website!