登录
首页 >  文章 >  前端

JavaScriptbindcallapply使用技巧

时间：2026-01-27 22:13:38 340浏览 收藏

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JavaScript函数绑定：bind、call与apply使用详解》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

bind返回绑定this和预设参数的新函数，不立即执行；call和apply立即执行，call传参逐个列出，apply以数组形式传参。

什么是JavaScript函数绑定_bind、call和apply如何使用

JavaScript 中的 bind、call 和 apply 都是用来**改变函数内部 this 指向**的方法，但它们的调用方式和返回结果不同。理解三者区别，是掌握 JS 执行上下文和函数式编程的关键。

bind：返回新函数，不立即执行

bind 会创建一个新函数，把原函数的 this 永久绑定到指定对象，并可预设部分参数（柯里化）。调用时才真正执行。

  • 语法：fn.bind(thisArg, arg1, arg2, ...)
  • 返回值：一个绑定好 this 和部分参数的新函数
  • 常用于事件监听、回调传参、构造函数复用等场景

例如：

const user = { name: 'Alice' };
function greet(greeting, punctuation) {
  return `${greeting}, ${this.name}${punctuation}`;
}
const greetAlice = greet.bind(user, 'Hello');
console.log(greetAlice('!')); // "Hello, Alice!"

call：立即执行，参数逐个传入

call 立即调用函数，并将 this 指向第一个参数指定的对象，其余参数按顺序依次传入。

  • 语法：fn.call(thisArg, arg1, arg2, ...)
  • 适用于需要临时切换上下文并立刻运行的场景
  • 常用于借用方法（如数组方法处理类数组）

例如：

const arrLike = { 0: 'a', 1: 'b', length: 2 };
Array.prototype.forEach.call(arrLike, (item) => console.log(item));
// 输出 'a' 和 'b'

apply：立即执行，参数以数组形式传入

apply 和 call 功能一致，只是参数接收方式不同：它把第二个参数作为数组（或类数组）一次性传入。

  • 语法：fn.apply(thisArg, [arg1, arg2, ...])
  • 适合参数数量不确定、已存在参数数组的情况
  • 经典用途：求最大/最小值、合并数组等

例如：

const numbers = [3, 7, 1];
Math.max.apply(null, numbers); // 7
// 等价于 Math.max(3, 7, 1)

三者核心对比

相同点：都能显式控制函数调用时的 this；
不同点：

  • bind 返回函数，延迟执行；call 和 apply 立即执行
  • call 参数展开传；apply 参数打包成数组传
  • ES6 后，可用展开运算符 ... 替代 apply 大部分用途，如 Math.max(...numbers)

今天关于《JavaScriptbindcallapply使用技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

前往漫画官网入口并下载 ➜
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>