javascript - JavaScript的“绑定”方法有什么用？(What is the use of the JavaScript 'bind' method?)

Question

JavaScript中bind()的用途是什么？

  ask by Sandeep Kumar translate from so

Answer 1

Bind creates a new function that will have this set to the first parameter passed to bind() .

(Bind创建一个新函数， this函数会将this设置为传递给bind()的第一个参数。)

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

(这是一个示例，显示了如何使用bind传递具有正确this的成员方法：)

var Button = function(content) { 
  this.content = content;
};
Button.prototype.click = function() {
  console.log(this.content + ' clicked');
};

var myButton = new Button('OK');
myButton.click();

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

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

Which prints out:

(打印出：)

OK clicked
undefined clicked
OK clicked

You can also add extra parameters after the 1st ( this ) parameter and bind will pass in those values to the original function.

(您还可以在第一个（ this ）参数之后添加其他参数， bind会将这些值传递给原始函数。)

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));

Which prints out:

(打印出：)

15

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

(查看JavaScript Function绑定以获取更多信息和交互式示例。)

Update: ECMAScript 2015 adds support for => functions.

(更新：ECMAScript 2015添加了对=>函数的支持。)

=> 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.

(=>函数更紧凑，并且不会在其定义范围内更改this指针，因此您可能不需要经常使用bind() 。)

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:

(例如，如果您希望第一个示例中的Button上的函数将click回调连接到DOM事件，则以下是所有有效的方法：)

Button.prototype.hookEvent(element) {
  // Use bind() to ensure 'this' is the 'this' inside click()
  element.addEventListener('click', this.click.bind(this));
};

Or:

(要么：)

Button.prototype.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() });
}

Or:

(要么：)

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