JavaScript 的 “绑定” 方法有什么用？

JavaScript bind()的用途是什么？

javascript function bind

Bind 创建一个新函数， this函数将强制此函数成为传递给bind()的参数。

这是一个示例，显示了如何使用bind传递具有正确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会将这些值传递给原始函数。稍后传递给绑定函数的所有其他参数都将在绑定参数之后传递：

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

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

哪个打印出来：

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

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

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

bind()的最简单用法是创建一个函数，无论该函数如何调用，都将使用特定的this值进行调用。

x = 9;
var module = {
    x: 81,
    getX: function () {
        return this.x;
    }
};

module.getX(); // 81

var getX = module.getX;
getX(); // 9, because in this case, "this" refers to the global object

// create a new function with 'this' bound to module
var boundGetX = getX.bind(module);
boundGetX(); // 81

绑定允许 -

将 “this” 的值设置为特定对象。由于有时这不是预期的，因此这很有帮助。
重用方法
咖喱功能

例如，您有一个扣除每月俱乐部费用的功能

function getMonthlyFee(fee){
  var remaining = this.total - fee;
  this.total = remaining;
  return this.name +' remaining balance:'+remaining;
}

现在，您想对其他俱乐部会员重用此功能。请注意，会员的月费会有所不同。

假设 Rachel 的余额为 500，每月会员费为 90。

var rachel = {name:'Rachel Green', total:500};

现在，创建一个函数，该函数可以一次又一次地用于每月从她的帐户中扣除费用

//bind
var getRachelFee = getMonthlyFee.bind(rachel, 90);
//deduct
getRachelFee();//Rachel Green remaining balance:410
getRachelFee();//Rachel Green remaining balance:320

现在，相同的 getMonthlyFee 函数可用于具有不同会员费的另一个成员。例如，罗斯 · 盖勒（Ross Geller）的余额为 250，每月费用为 25

var ross = {name:'Ross Geller', total:250};
//bind
var getRossFee = getMonthlyFee.bind(ross, 25);
//deduct
getRossFee(); //Ross Geller remaining balance:225
getRossFee(); //Ross Geller remaining balance:200

协慌网

JavaScript 的 “绑定” 方法有什么用？

答案