/**
 * Bind is a method inherited from Function.prototype same like call and apply
 * It basically helps to bind a function to an object's context during initialisation 
 * 
 * */

window.myname = "Jineesh";  
var foo = function(){ 
  return this.myname;
};

//IE < 8 has issues with this, supported in ecmascript 5
var obj = { 
    myname : "John", 
    fn:foo.bind(window)// binds to window object
}; 
console.log( obj.fn() ); // Returns Jineesh

变量具有局部和全局作用域。假设我们有两个同名的变量。一个是全局定义的，另一个是在函数闭包内定义的，我们希望得到函数闭包内的变量值。在这种情况下，我们使用这个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>

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

有关详细信息，请参阅MDN Web Docs上的此链接：

函数.product.bind（）

另一种用法是，可以将绑定函数作为参数传递给在另一个执行上下文下运行的另一个函数。

var name = "sample";
function sample(){
  console.log(this.name);
}
var cb = sample.bind(this);

function somefunction(cb){
  //other code
  cb();
}
somefunction.call({}, cb);

function.prototype.bind（）接受Object。它将调用函数绑定到传递的Object，并返回相同的。当对象绑定到函数时，这意味着您将能够使用“this”关键字。

也可以说，

function.prototype.bind（）用于提供/更改作用

让powerOfNumber=函数（数字）{设乘积=1；for（设i=1；i<=this.power；i++）{产品*=数量；}退货产品；}让powerOfTwo=powerOfNumber.bind（｛power:2｝）；警报（powerOfTwo（2））；让powerOfThree=powerOfNumber.bind（{power:3}）；警报（powerOfThree（2））；让powerOfFour=powerOfNumber.bind（{power:4}）；警报（powerOfFour（2））；

让我们试着理解这一点。

    let powerOfNumber = function(number) {
      let product = 1;
      for (let i = 1; i <= this.power; i++) {
        product *= number;
      }
      return product;
    }

这里，在这个函数中，这对应于绑定到函数powerOfNumber的对象。目前，我们没有任何函数绑定到此函数。

让我们创建一个函数powerOfTwo，它将使用上面的函数查找数字的二次幂。

  let powerOfTwo = powerOfNumber.bind({power:2});
  alert(powerOfTwo(2));

这里使用bind将对象｛power:2｝传递给powerOfNumber函数。

bind函数将此对象绑定到powerOfNumber（），并将以下函数返回给powerOfTwo。现在，powerOfTwo看起来，

    let powerOfNumber = function(number) {
      let product = 1;
        for(let i=1; i<=2; i++) {
          product*=number;
      }
      return product;
    }

因此，powerOfTwo将找到第二个电源。

请随意查看。

Javascript中的bind（）函数