Detailed explanation of bind() example in Function

Preface

bind() accepts countless parameters. The first parameter is the this point of the new function it generates. For example, if I pass a window, no matter where it is called, in this new function this points to window, and the parameters of this new function are the second, third, fourth... nth parameter of bind() plus its original parameters. (Okay, I’m confused myself)

Example introduction

It’s easier to understand if we look at chestnuts. Let’s take a look at the most basic usage of bind():

this.x = 9; 
var module = {
 x: 81,
 getX: function() { return this.x; }
};
 
module.getX(); // 返回 81
 
var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域
 
// 创建一个新函数，将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

It is obvious here that when we call retrieveX under the window object, the result must be x under the window. We bind the module object to this of retrieveX, and the problem is solved. No matter where it is called, this will Points to the module object.

There are also other parameters of bind(). I believe that friends who are exposed to bind() for the first time will be confused when they see the above definition.

Let’s give a chestnut:

function list() {
 return Array.prototype.slice.call(arguments);
}
 
var list1 = list(1, 2, 3); // [1, 2, 3]
 
// 创建一个拥有预设初始参数的函数
var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});
 
var list2 = leadingThirtysevenList(); // [[69,37],{a:2}]
var list3 = leadingThirtysevenList(1, 2, 3); // [[69,37],{a:2}, 1, 2, 3]

The list function is very simple. It inserts each parameter passed in into an array. We use bind() to set the initial value for the list function, because there is no need Change the pointer of this in the list, so pass undefined directly. Starting from the second parameter, you need to pass in the value of the list function. The return values ​​​​of list2 and list3 explain everything well.

The scenario I usually use bind() is to cooperate with the setTimeout function, because when executing setTimeout, this will point to the window object by default. Before using bind(), I did this:

function Coder(name) {
 var that = this;
 that.name = name;
 that.getName = function() {
  console.log(that.name)
 };
 that.delayGetName = function() {
  setTimeout(that.getName,1000)
 };
}
var me = new Coder('Jins')
me.delayGetName()//延迟一秒输出Jins

Define a pointer that caches this at the top level of the function, so that no matter how it is called, that points to the instance of Coder, but defining one more variable is always uncomfortable.

It’s much simpler to use bind():

function Coder(name) {
 this.name = name;
 this.getName = function() {
  console.log(this.name)
 };
 this.delayGetName = function() {
  setTimeout(this.getName.bind(this),1000)
 };
}
var me = new Coder('Jins')
me.delayGetName()//延迟一秒输出Jins

This is OK, directly bind the this of setTimeout to the outer this, which is definitely what we want!

For more detailed explanations of bind() examples in Function, please pay attention to the PHP Chinese website!