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（）方法创建一个新函数，当调用该函数时，将其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

从Function.pr原型.bind（）上的MDN文档中：

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

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

它真正有趣的地方是，当你不仅为它绑定一个值，而且为它的参数属性绑定一个：

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（）方法将对象作为第一个参数，并创建一个新函数。当调用函数时，函数体中this的值将是在bind（）函数中作为参数传入的对象。

这在JS中是如何工作的

javascript中this的值始终取决于调用函数的对象。此值始终指调用函数的点左侧的对象。对于全局范围，这是窗口（或nodeJS中的全局）。只有调用、应用和绑定才能以不同方式更改此绑定。下面是一个示例，说明this关键字的工作原理：

让obj={prop1:1，func:function（）｛console.log（this）；｝}obj.func（）；//obj位于点的左侧，因此这是指obj常量customFunc=obj.func；//我们将函数存储在customFunc对象中customFunc（）；//现在点左边的对象是窗口，//customFunc（）是window.customFunc（//因此，将记录窗口

如何使用绑定？

Bind可以帮助克服使用此关键字时遇到的困难，方法是在此处指定一个固定的对象。例如：

var name='globalName'；常量对象={name:'myName'，sayName:function（）｛console.log（this.name）；｝}常量say=obj.sayName；//我们只是存储函数，它的值不会被神奇地传递say（）；//现在，由于此函数在全局范围内执行，因此将引用全局变量const-boundSay=obj.sayName.bind（obj）；//现在，this的值被绑定到obj对象bounday（）；//现在，这将引用obj对象中的名称：“myName”

一旦函数被绑定到特定的这个值，我们就可以传递它，甚至可以将它放到其他对象的财产中。其价值将保持不变。

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

以下是最简单的解释：

说你有一个功能

function _loop(n) { console.log("so: " + n) }

显然，您可以像往常一样将其称为loop（69）。

重写如下：

var _loop = function() { console.log("so: " + this.n) }

注意现在有

无此类参数使用“this”获取命名参数

现在可以这样调用函数：

 _loop.bind( {"n": 420} )

就是这样。

最典型的用例：

真正典型的用法是需要向回调中添加参数。

回调不能有参数。

因此，只需如上所述“重写”回调。