JavaScript 函数调用方法详解：call、apply与bind的用法对比

1. call 方法的使用

call 方法用于调用一个函数，并指定该函数内的 this 指向某个特定对象。其第一个参数为上下文对象，后续参数以逗号分隔逐个传入。

以下示例展示了如何使用 call 将函数执行的上下文设置为当前全局对象（或默认上下文）：

function print(message) {
    console.log(message);
    return message;
}
// 调用 print 函数，this 指向全局对象（或 undefined），传入参数 "cnblogs"
print.call(null, "cnblogs"); // 控制台输出：cnblogs

语法结构

• func.call(thisArg, arg1, arg2, ...)
• 第一个参数 thisArg 是函数执行时内部 this 所指向的对象。
• 其余参数为直接传递给被调用函数的独立值。

2. apply 方法的使用

apply 方法与 call 非常相似，同样用于指定函数执行的 this 上下文。两者的核心区别在于参数的传递方式：apply 接受一个类数组对象（Array-like object 或 arguments）作为参数集合。

示例演示了如何通过 apply 使用数组作为参数源：

function add(a, b) {
    console.log(a + b);
}
// 使用数组 ["hello", "cnblogs"] 展开作为参数传递
add.apply(null, ["hello", "cnblogs"]); 

关键区别

• call：参数需逐个列出。
  obj.func.call(ctx, arg1, arg2)
• apply：参数需封装为数组（或伪数组）。
  obj.func.apply(ctx, [arg1, arg2])

3. bind 方法的使用

bind 与前两者不同，它不会立即执行函数，而是返回一个新的函数。这个新函数内部的 this 已经被永久绑定到指定的对象上，之后只需像普通函数一样调用即可。

以下代码展示了 bind 的绑定机制。注意原文代码中存在未定义的变量，此处修正为标准的对象属性访问逻辑：

// 定义一个简单的构造函数或普通函数，依赖 this.x
function showValue(y) { 
    // 此处假设 this.x 有值，通常用于实例方法或模拟闭包场景
    console.log((this && this.x || 0) + y); 
} 

var obj = { x: 10 }; 
// 创建一个新的函数 g，将其内部 this 永远绑定为 obj
var g = showValue.bind(obj); 

// 此时调用 g(2)，相当于 showValue 内部 this 指向 obj，y 为 2
g(2); 

4. 三种方法的异同与总结

相同点

• 三者都属于 Function.prototype 的方法，可用于改变函数运行时的 this 指向。
• 都可以用来实现“借用”其他对象的方法（Function Borrowing）。

不同点

• 执行时机：call 和 apply 会立即执行函数；而 bind 仅返回一个新函数，需手动调用。
• 传参方式：call 采用参数列表，apply 采用参数数组，bind 支持柯里化（预填充部分参数）。

应用建议

• 若需要动态确定传给另一个函数的参数个数，优先使用 apply（例如 Math.max.apply(null, array)）。
• 若需要进行回调函数注册且必须固定 this 指向，使用 bind（例如 setTimeout(handler.bind(this), 1000)）。
• 一般在参数明确且数量不多时，call 更为直观。

以上就是 JavaScript 中 call、apply、bind 详细用法的说明，更多关于 JS 函数进阶技巧的资料请关注本站其它相关文章！