Deep understanding of Function. prototype. bind () in JS

Bind is a new method in ES5, which can change the point of this inside the function. This article will give you a deep understanding of the Function. prototype. bind () method in Javascript. If you need it, you can refer to it for reference. Let's take a look at it. Preface

Function binding is likely to be the least of your attention when using JavaScript, but when you realize that you need a solution to solve how to maintain this context in another Function, what you really need is Function. prototype. bind (), but you may still be unaware of this.

When you encounter this problem for the first time, you may prefer to set this to a variable, so that you can continue to reference it after changing the context.

I. bind syntax

The main function of the bind () method is to bind a function to an object. The bind () method creates a function, and the value of this object in the function is bound to bind () the value of the function.

1.1 Definition

Bind () is defined as follows:

The bind () method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

The bind () function creates a new function (called the binding function), which has the same body as the called function (the target function bound to the function. When the target function is called, this value is bound to the first parameter of bind (). this parameter cannot be overwritten.

Principle 1.2

You can use the following code to simulate the bind () principle:

Function. prototype. bind = function (context) {var self = this; // Save the original function return function () {// return a new function return self. apply (context, arguments); // when executing a new function, use the passed context as the new function's this }}

1.3 syntax

Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])

Ii. bind application scenarios

2.1 implement Object Inheritance

var A = function(name) { this.name = name;} var B = function() { A.bind(this, arguments);} B.prototype.getName = function() { return this.name;} var b = new B("hello");console.log(b.getName()); // "hello"

2.2 event handling

Var paint = {color: "red", count: 0, updateCount: function () {this. count ++; console. log (this. count) ;}}; // event processing function binding error method: document. querySelector ('button '). addEventListener ('click', paint. updateCount); // paint. this point of the updateCount function becomes the correct method for binding the DOM object // event processing function: document. querySelector ('button '). addEventListener ('click', paint. updateCount. bind (paint); // paint. the point of this in the updateCount function is "paint ".

2.3 interval Functions

Var comment y = {text: "Hello World! ", BeforeRender: function () {alert (this. text) ;}, render: function () {// error method: setTimeout (this. beforeRender, 0); // undefined // correct method: setTimeout (this. beforeRender. bind (this), 0); // "Hello World! "}}; Policy. render ();

2.4 borrow the native method of Array

var a = {};Array.prototype.push.bind(a, "hello", "world")(); console.log(a); // "hello", "world"

3. browser compatibility of the bind () method

Iv. Compatibility of bind ()

If (! Function. prototype. bind) {Function. prototype. bind = function () {var self = this, // Save the original function context = []. shift. call (arguments), // this context args to be bound = []. slice. call (arguments); // convert the remaining parameters to the array return function () {// return a new function // when the new function is executed, use the passed context as the new function's this // and combine the two parameters respectively as the new function's parameter return self. apply (context, []. concat. call (args, []. slice. call (arguments )));}};}

V. Differences between bind and call/apply methods

Commonalities:

Can change the context of function execution;

Differences:

Bind: do not execute the function immediately. It is generally used for asynchronous calls and events. call/apply: Execute the function immediately.

Summary

Well, the above is all the content of this article. I hope the content of this article will be helpful for you to learn or use Javascript. If you have any questions, you can leave a message.

For more information about X, see the Function. prototype. bind () method in JS!