bind（）方法创建一个新函数，当调用该函数时，将其this关键字设置为所提供的值，并在调用新函数时提供的任何参数之前设置一个给定的参数序列。

第一部分的示例

使用St8从反应包中抓取

import { useState } from "react"

function st8() {
    switch(arguments.length) {
        case 0: return this[0]
        case 1: return void this[1](arguments[0])
        default: throw new Error("Expected 0 or 1 arguments")
    }
}


function useSt8(initial) {
    // this in st8 will be something like [state, setSatate]
    return st8.bind(useState(initial))
}

// usage
function Counter() {
  const count = useSt8(0);
  return (
    <>
      Count: {count()}
      <button onClick={() => count(0)}>Reset</button>
      <button onClick={() => count(prevCount => prevCount + 1)}>inc</button>
    </>
  );
}

第二部分的示例

const add = (a, b) => a+b

someThis = this
// new function with this value equal to someThis
add5 = add.bind(someThis, 5) 
add5(10) // 15

// we don't use this in add decelartion so this will work too.
add10 = add.bind(null, 10) 
add10(5) // 15

bind（）方法创建一个新的函数实例，该实例的值与传递到bind（的值绑定。例如：

   window.color = "red"; 
   var o = { color: "blue" }; 
   function sayColor(){ 
       alert(this.color); 
   } 
   var objectSayColor = sayColor.bind(o); 
   objectSayColor(); //blue 

在这里，通过调用bind（）并传入对象o，从sayColor（）创建了一个名为objectSayColor）的新函数。objectSayCcolor（）函数的这个值相当于o，因此即使作为全局调用调用该函数，也会显示字符串“blue”。

参考资料：Nicholas C.Zakas-面向WEB开发人员的专业JAVASCRIPT®

除上述内容外，bind（）方法还允许对象从另一个对象借用方法，而无需复制该方法。这在JavaScript中称为函数借用。

bind（）方法创建一个新函数，当调用该函数时，将其this关键字设置为所提供的值，并在调用新函数时提供的任何参数之前设置一个给定的参数序列。

第一部分的示例

使用St8从反应包中抓取

import { useState } from "react"

function st8() {
    switch(arguments.length) {
        case 0: return this[0]
        case 1: return void this[1](arguments[0])
        default: throw new Error("Expected 0 or 1 arguments")
    }
}


function useSt8(initial) {
    // this in st8 will be something like [state, setSatate]
    return st8.bind(useState(initial))
}

// usage
function Counter() {
  const count = useSt8(0);
  return (
    <>
      Count: {count()}
      <button onClick={() => count(0)}>Reset</button>
      <button onClick={() => count(prevCount => prevCount + 1)}>inc</button>
    </>
  );
}

第二部分的示例

const add = (a, b) => a+b

someThis = this
// new function with this value equal to someThis
add5 = add.bind(someThis, 5) 
add5(10) // 15

// we don't use this in add decelartion so this will work too.
add10 = add.bind(null, 10) 
add10(5) // 15

绑定允许-

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

简单解释：

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