bind 可预先绑定 this 和部分参数生成新函数,调用时补全剩余参数;不立即执行,支持多次调用,但不可用 new 调用,且对箭头函数无效。

bind 可以把函数的 this 和部分参数预先固定,生成一个新函数,调用时再补上剩余参数。
基础用法:绑定 this 和前几个参数
语法是 fn.bind(thisArg, arg1, arg2, ...)。它不会执行原函数,只返回一个新函数。
-
thisArg是将来调用时函数内部的 this 值(可为 null/undefined,严格模式下保持原值) - 后面传入的参数会“占位”,调用新函数时,这些参数在最前面,再拼接你传入的新参数
例如:
function greet(greeting, punctuation) {
return `${greeting}, ${this.name}${punctuation}`;
}
const person = { name: 'Alice' };
const sayHello = greet.bind(person, 'Hello');
sayHello('!'); // "Hello, Alice!"
固定多个参数,留空中间位置用 undefined 占位
bind 不支持跳过前面参数只填后面的,但可以用 undefined 占位,等真正调用时再传值。
立即学习“Java免费学习笔记(深入)”;
- 比如想固定第三个参数,就把前两个设为
undefined - 实际调用时传入的参数会依次填充未被 bind 固定的位置
示例:
function sum(a, b, c) { return a + b + c; }
const add5 = sum.bind(null, undefined, undefined, 5);
add5(10, 20); // 10 + 20 + 5 = 35
和箭头函数、call/apply 的区别
bind 返回的是**可复用的函数**,而 call/apply 立即执行;箭头函数没有自己的 this,也不能用 bind 改变 this(bind 无效)。
- bind 生成的函数可以多次调用,每次传不同后续参数
- bind 后的函数的 length 属性只计未被绑定的参数个数(已绑定的不计入)
- 不能用 new 调用 bind 后的函数(除非原函数本身支持构造器行为)
实用场景举例
常见于事件处理、回调预置、工具函数封装等。
- 按钮点击传固定 ID:
button.addEventListener('click', handleClick.bind(null, 'user-123')) - 封装带默认配置的 API 调用:
const getPosts = apiRequest.bind(null, '/posts', 'GET') - 配合 setTimeout 延迟调用并传参:
setTimeout(sayHi.bind(null, 'Bob'), 1000)


















