JavaScript的“绑定"方法有什么用? [英] What is the use of the JavaScript 'bind' method?

问题描述

bind()在JavaScript中有什么用途?

What is the use of bind() in JavaScript?

推荐答案

绑定创建了一个新函数，该函数将强制函数内部的this作为传递给bind()的参数.

Bind creates a new function that will force the this inside the function to be the parameter passed to bind().

下面是一个示例，该示例显示如何使用bind传递具有正确的this的成员方法:

Here's an example that shows how to use bind to pass a member method around that has the correct this:

var myButton = {
  content: 'OK',
  click() {
    console.log(this.content + ' clicked');
  }
};

myButton.click();

var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis

var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton

哪个打印出来:

OK clicked
undefined clicked
OK clicked

您还可以在第一个(this)参数之后添加其他参数，并且bind会将这些值传递给原始函数.您稍后传递给绑定函数的所有其他参数都将在绑定参数之后传递:

You can also add extra parameters after the 1st (this) parameter and bind will pass in those values to the original function. Any additional parameters you later pass to the bound function will be passed in after the bound parameters:

// Example showing binding some parameters
var sum = function(a, b) {
  return a + b;
};

var add5 = sum.bind(null, 5);
console.log(add5(10));

哪个打印出来:

15

查看 JavaScript函数绑定以获取更多信息和交互式示例.

Check out JavaScript Function bind for more info and interactive examples.

更新:ECMAScript 2015添加了对=>函数的支持. =>函数更紧凑，并且不会在其定义范围内更改this指针，因此您可能不需要经常使用bind().例如，如果您希望第一个示例中的Button上的函数将click回调连接到DOM事件，则以下是执行此操作的所有有效方法:

Update: ECMAScript 2015 adds support for => functions. => functions are more compact and do not change the this pointer from their defining scope, so you may not need to use bind() as often. For example, if you wanted a function on Button from the first example to hook up the click callback to a DOM event, the following are all valid ways of doing that:

var myButton = {
  ... // As above
  hookEvent(element) {
    // Use bind() to ensure 'this' is the 'this' inside click()
    element.addEventListener('click', this.click.bind(this));
  }
};

或者:

var myButton = {
  ... // As above
  hookEvent(element) {
    // Use a new variable for 'this' since 'this' inside the function
    // will not be the 'this' inside hookEvent()
    var me = this;
    element.addEventListener('click', function() { me.click() });
  }
};    

或者:

var myButton = {
  ... // As above
  hookEvent(element) {
    // => functions do not change 'this', so you can use it directly
    element.addEventListener('click', () => this.click());
  }
};

这篇关于JavaScript的“绑定"方法有什么用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！