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

打印出来：

15

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

更新：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

请参阅此链接以获取更多信息

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

绑定允许-

• 将“this”的值设置为特定对象。这变得非常有用，因为有时这不是预期的。
• 重用方法
• 咖喱函数

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

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

现在您想为不同的俱乐部成员重复使用此功能。请注意，月费会因会员而异。

假设瑞秋的余额为 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 函数可以用于其他会员费不同的会员。例如，罗斯盖勒有 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

从该MDN文档上Function.prototype.bind()：

的绑定（）方法创建一个新的功能，调用它时，具有其将此关键字设置为所提供的值，与前述的当新功能被调用任何设置参数给定的序列。

那么，这是什么意思？！

好吧，让我们采用一个看起来像这样的函数：

var logProp = function(prop) {
    console.log(this[prop]);
};

现在，让我们看一个看起来像这样的对象：

var Obj = {
    x : 5,
    y : 10
};

我们可以像这样将我们的函数绑定到我们的对象：

Obj.log = logProp.bind(Obj);

现在，我们可以Obj.log在代码中的任何地方运行：

Obj.log('x'); // Output : 5
Obj.log('y'); // Output : 10

这是有效的，因为我们将 的值绑定this到我们的对象Obj。

真正有趣的地方在于，您不仅绑定了 的值this，还绑定了它的参数prop：

Obj.logX = logProp.bind(Obj, 'x');
Obj.logY = logProp.bind(Obj, 'y');

我们现在可以这样做：

Obj.logX(); // Output : 5
Obj.logY(); // Output : 10

与 不同Obj.log，我们不必传递x或y，因为我们在进行绑定时传递了这些值。

变量有局部作用域和全局作用域。假设我们有两个同名的变量。一个是全局定义的，另一个是在函数闭包内定义的，我们想要获取函数闭包内的变量值。在这种情况下，我们使用这个 bind() 方法。请看下面的简单例子：

var x = 9; // this refers to global "window" object here in the browser
var person = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

var y = person.getX; // It will return 9, because it will call global value of x(var x=9).

var x2 = y.bind(person); // It will return 81, because it will call local value of x, which is defined in the object called person(x=81).

document.getElementById("demo1").innerHTML = y();
document.getElementById("demo2").innerHTML = x2();

<p id="demo1">0</p>
<p id="demo2">0</p>