JavaScript 中的 bind() 方法创建一个新的函数，指定 this 值和可选的参数，而不立即调用原始函数。它通常用于设置函数的上下文(this) 并部分应用参数。此方法用于将特定对象绑定到通用函数。
为了理解 bind() 方法，我们首先需要了解 this 关键字。在 JavaScript（以及其他编程语言中），this 是一个特殊的关键字，用于在函数内部引用调用该函数的对象。this 的值取决于函数是如何被调用的，并且在不同的上下文中行为可能有所不同。
语法
bind() 方法的语法如下：
functionToBind.bind(thisValue, arg1, arg2, ...);
这里 functionToBind 是你想要设置 this 值和参数的原始函数。
参数
-
thisValue — 当新函数被调用时应传递作为 this 参数的值。
-
arg1, arg2, ... — 新函数被调用时将固定的可选参数（部分应用）。这些参数将在提供给新函数的参数前插入。
现在让我们通过一些程序示例来理解 Function bind() 方法。
不使用 bind() 方法的情况
这里我们将创建一个通用的 greet() 函数，它简单地打印到控制台。我们创建了一个名为 person 的常量对象，并赋予它一些属性，即 name，然后通过传递消息 "Hello" 调用函数 greet。
<html>
<body>
<div id = "demo"> </div>
<script>
const output = document.getElementById("demo");
function greet(message) {
output.innerHTML = message + ', ' + this.name;
}
const person = { name: 'John Doe' };
greet('Hello');
</script>
</body>
</html>
输出
Hello,
在这个例子中，当直接调用 greet 函数而不使用 bind 时，this 值没有被显式设置，导致使用 undefined 或者全局对象（浏览器环境中的 window）作为 this。
使用 bind() 方法的情况
为了解决前一代码中的问题，我们使用 bind 函数将 person 对象绑定到 greet 函数。
<html>
<body>
<div id = "demo"> </div>
<script>
const output = document.getElementById("demo");
function greet(message) {
output.innerHTML = message + ', ' + this.name;
}
const person = { name: 'John Doe' };
const greetPerson = greet.bind(person, 'Hello');
greetPerson();
</script>
</body>
</html>
输出
Hello, John Doe
bind 方法能够创建一个新的函数 greetPerson，其中 this 值被显式地设置为 person 对象，并且像之前的代码一样部分应用了 "Hello" 参数。
使用 bind() 确保了函数在期望的上下文中执行，防止了与 JavaScript 函数中 this 默认行为相关的任何问题。
示例：将不同对象绑定到同一个函数
我们创建了三个具有点的 x 和 y 坐标的对象，并创建了一个 printVal 函数来打印点的坐标。bind 方法将这些点绑定到 printVal 函数，并打印出每个点的 x 和 y 坐标。
<html>
<body>
<div id = "demo"> </div>
<script>
const output = document.getElementById("demo");
const points1 = {
X: 100,
Y: 100
}
const points2 = {
X: 200,
Y: 100
}
const points3 = {
X: 350,
Y: 400
}
function printVal() {
output.innerHTML += "Coordinates: "+this.X + "," + this.Y + "<br>";
}
const printFunc2 = printVal.bind(points1);
printFunc2();
const printFunc3 = printVal.bind(points2);
printFunc3();
const printFunc4 = printVal.bind(points3);
printFunc4();
</script>
</body>
</html>
输出
Coordinates: 100,100
Coordinates: 200,100
Coordinates: 350,400
示例：设置函数参数的默认值
这是一种新的情况，我们使用 bind 函数来预定义参数。multiply() 函数简单地接收两个输入并返回它们的乘积。通过使用 bind() 方法，我们可以根据需要设置任何一个参数的默认值。
在下面的例子中，它将变量 y 设置为 2，因此在仅传递一个参数 x 为 5 调用该函数时，它将乘以预先设置的 2，返回 5 * 2 = 10 的输出。
<html>
<body>
<div id = "output"> </div>
<script>
function multiply(x, y) {
return x * y;
}
const multiplyByTwo = multiply.bind(null, 2);
document.getElementById("output").innerHTML= multiplyByTwo(5);
</script>
</body>
</html>
输出
10
值得注意的是，bind 方法创建并返回一个新的函数，并不修改原始函数。相同的函数可以重用并且在不实际修改的情况下匹配不同的使用场景。