如上所述，Function.bind（）允许您指定函数将在其中执行的上下文（也就是说，它允许您传递this关键字将解析到函数体中的对象）。

执行类似服务的两个类似工具包API方法：

jQuery.proxy（）

Dojo.hhitch（）

如上所述，Function.bind（）允许您指定函数将在其中执行的上下文（也就是说，它允许您传递this关键字将解析到函数体中的对象）。

执行类似服务的两个类似工具包API方法：

jQuery.proxy（）

Dojo.hhitch（）

简单解释：

bind（）创建一个新函数，即它返回给您的函数的新引用。

在该关键字后面的parameter中，传递要预配置的参数。实际上，它不会立即执行，只是准备执行。

您可以根据需要预配置任意多个参数。

理解绑定的简单示例：

function calculate(operation) {
  if (operation === 'ADD') {
   alert('The Operation is Addition');
  } else if (operation === 'SUBTRACT') {
   alert('The Operation is Subtraction');
  }
}

addBtn.addEventListener('click', calculate.bind(this, 'ADD'));
subtractBtn.addEventListener('click', calculate.bind(this, 'SUBTRACT'));

简单的例子

function lol(second, third) {
    console.log(this.first, second, third);
}

lol(); // undefined, undefined, undefined
lol('1'); // undefined, "1", undefined
lol('1', '2'); // undefined, "1", "2"

lol.call({first: '1'}); // "1", undefined, undefined
lol.call({first: '1'}, '2'); // "1", "2", undefined
lol.call({first: '1'}, '2', '3'); // "1", "2", "3"

lol.apply({first: '1'}); // "1", undefined, undefined
lol.apply({first: '1'}, ['2', '3']); // "1", "2", "3"

const newLol = lol.bind({first: '1'}); 
newLol(); // "1", undefined, undefined
newLol('2'); // "1", "2", undefined
newLol('2', '3'); // "1", "2", "3"

const newOmg = lol.bind({first: '1'}, '2');
newOmg(); // "1", "2", undefined
newOmg('3'); // "1", "2", "3"

const newWtf = lol.bind({first: '1'}, '2', '3');
newWtf(); // "1", "2", "3"

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上的一个函数将单击回调连接到DOM事件，以下都是实现这一点的有效方法：

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

Or:

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

Or:

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

变量具有局部和全局作用域。假设我们有两个同名的变量。一个是全局定义的，另一个是在函数闭包内定义的，我们希望得到函数闭包内的变量值。在这种情况下，我们使用这个bind（）方法。请参见下面的简单示例：

变量x=9；//这是指浏览器中的全局“窗口”对象var人={x： 81中，getX：函数（）{返回此.x；}};var y=person.getX；//它将返回9，因为它将调用x的全局值（varx=9）。var x2=y.bind（人）；//它将返回81，因为它将调用在名为person（x=81）的对象中定义的x的局部值。document.getElementById（“demo1”）.innerHTML=y（）；document.getElementById（“demo2”）.innerHTML=x2（）；<p id=“demo1”>0</p><p id=“demo2”>0</p>