In-depth understanding of the Function.prototype.bind() method in JS

Preface

Function binding is probably the point that everyone pays the least attention to when using JavaScript, but when you realize that you need a solution to how to solve it in another function When maintaining this context, what you really need is Function.prototype.bind(), but you may still not realize this.

The first time you encounter this problem, you may be tempted to set this to a variable so that you can continue to refer to it after changing the context.

1. The syntax of bind

The main function of the bind() method is to bind a function to an object. The bind() method will create a function, and the this object in the function body The value will be bound to the value passed into the bind() 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.

bind() function creates a new function (called a bound function), and the new function is the same as the called function (the bound function objective function) have the same function body. When the target function is called, the this value is bound to the first parameter of bind() and cannot be overridden.

1.2 Principle

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

Function.prototype.bind = function(context) {
 var self = this; // 保存原函数
 return function() { // 返回一个新函数
  return self.apply(context, arguments); // 执行新函数时，将传入的上下文context作为新函数的this
 }
}

1.3 Syntax

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

2. Bind application scenarios

2.1 Implementing 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 processing

var paint = {
 color: "red",
 count: 0,
 updateCount: function() {
  this.count++;
  console.log(this.count);
 }
};
 
// 事件处理函数绑定的错误方法：
document.querySelector('button')
 .addEventListener('click', paint.updateCount); // paint.updateCount函数的this指向变成了该DOM对象
 
// 事件处理函数绑定的正确方法：
document.querySelector('button')
 .addEventListener('click', paint.updateCount.bind(paint)); // paint.updateCount函数的this指向变成了paint

2.3 Time interval function

var notify = {
 text: "Hello World！",
 beforeRender: function() {
  alert(this.text);
 },
 render: function() {
 
  // 错误方法：
  setTimeout(this.beforeRender, 0); // undefined
 
  // 正确方法：
  setTimeout(this.beforeRender.bind(this), 0); // "Hello World！"
 }
};
 
notify.render();

2.4 Borrowing the native method of Array

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

3. Browser compatibility of bind() method

##4. Compatibility writing method of bind()

if (!Function.prototype.bind) {
 Function.prototype.bind = function() {
  var self = this, // 保存原函数
   context = [].shift.call(arguments), // 需要绑定的this上下文
   args = [].slice.call(arguments); // 剩余的参数转成数组
  return function() { // 返回一个新函数
   // 执行新函数时，将传入的上下文context作为新函数的this
   // 并且组合两次分别传入的参数，作为新函数的参数
   return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
  }
 };
}

5. The difference between bind and call/apply methods

Common points:

can change the context of function execution;

Differences:

bind: does not execute the function immediately, generally used in asynchronous calls and events; call/apply: executes the function immediately.

Summary

Okay, the above is the entire content of this article. I hope the content of this article can be helpful to everyone in learning or using Javascript. If you have any questions, you can leave a message to communicate.

For more X-depth understanding of the Function.prototype.bind() method in JS and related articles, please pay attention to the PHP Chinese website!