Home > Web Front-end > JS Tutorial > Detailed explanation of bind() example in Function

Detailed explanation of bind() example in Function

高洛峰
Release: 2017-01-04 09:59:13
Original
1374 people have browsed it

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
Copy after login

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]
Copy after login

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
Copy after login

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
Copy after login

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!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template