JavaScript 中的 bind、call 和 apply 是函数的三种调用方式，它们可以改变函数执行时的上下文，并且还能够传递参数。在前端开发中，我们经常会用到这三种方式来处理函数调用的上下文和参数问题。本文将详细介绍这三种方法的使用方法和场景。
bind 方法
bind 方法用于创建一个新的函数，这个新的函数与原来的函数具有相同的函数体，但是执行时的上下文被绑定为指定的对象。bind 方法并不会立即执行函数，而是返回一个新的函数，需要通过调用这个新的函数来执行原来的函数。
语法
function.bind(thisArg[, arg1[, arg2[, ...]]])
- thisArg：指定的上下文对象。
- arg1, arg2, ...：可选参数，传递给原函数的参数列表。
示例代码
-- -------------------- ---- -------
----- --- - -
----- --------
------ -------- -- -
---------------- -- ---- -- ---------------
-
--
----- ----- - -------------------- -- --------
-------- -- -- ---- -- ---- -- ------在这个示例中，我们创建了一个名为 obj 的对象，定义了一个 sayHi 方法。然后通过 bind 方法创建了一个新的函数 sayHi，并把 obj 对象作为该函数执行时的上下文。最终，我们通过调用 sayHi 函数输出了 "Hi, my name is Alice"。
call 方法
call 方法用于调用一个函数，并且可以指定该函数执行时的上下文和参数。与 bind 方法不同，call 方法会立即执行函数。
语法
function.call(thisArg[, arg1[, arg2[, ...]]])
- thisArg：指定的上下文对象。
- arg1, arg2, ...：可选参数，传递给原函数的参数列表。
示例代码
const obj = {
name: 'Bob',
sayHi: function (greeting) {
console.log(`${greeting}, my name is ${this.name}`);
}
};
obj.sayHi.call(obj, 'Hello'); // 输出 "Hello, my name is Bob"在这个示例中，我们创建了一个名为 obj 的对象，定义了一个 sayHi 方法。然后通过 call 方法调用了 obj 对象的 sayHi 方法，并把 obj 对象作为该方法执行时的上下文，同时传入了一个参数 "Hello"。最终，我们通过调用 sayHi 方法输出了 "Hello, my name is Bob"。
apply 方法
apply 方法与 call 方法类似，也用于调用一个函数，并且可以指定该函数执行时的上下文和参数。但是，apply 方法的参数需要以数组的形式传递。
语法
function.apply(thisArg[, argsArray])
- thisArg：指定的上下文对象。
- argsArray：可选参数，以数组形式传递给原函数的参数列表。
示例代码
const obj = {
name: 'Charlie',
sayHi: function (greeting, emotion) {
console.log(`${greeting}, my name is ${this.name} and I'm feeling ${emotion}`);
}
};
obj.sayHi.apply(obj, ['Hi', 'happy']); // 输出 "Hi, my name is Charlie and I'm feeling happy"在这个示例中，我们创建了一个名为 obj 的对象，定义了一个 sayHi 方法。然后通过 apply 方法调用了 obj 对象的 sayHi 方法，并把 obj 对象作为该方法执行时的上下文，同时传入了一个包含两个参数的数组 ["Hi", "happy"]。最终，我们通过调用 sayHi 方法输出了 "Hi, my name is Charlie and I'm feeling happy"。
总结
bind、call 和 apply 是 JavaScript 中常用的函数
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70991