bind 创建永久绑定 this 和预置参数的新函数,返回可复用函数而非立即执行;适用于事件回调等防 this 丢失场景,但 new 调用会覆盖绑定的 this。

用 bind 创建永久锁定上下文的包装函数,核心是固定 this 值和部分参数,生成一个新函数,后续调用时不再受调用方式影响。
绑定 this 并固定部分参数
bind 返回的新函数会永久绑定指定的 this 值,无论之后如何调用(如作为回调、赋值给变量、被事件触发),this 都不会改变。还能预设前若干个参数(即“柯里化”)。
- 语法:
fn.bind(thisArg, arg1, arg2, ...) -
thisArg是未来调用时强制使用的this值 - 后续参数会在实际调用时自动前置传入
典型使用场景示例
比如对象方法需作为事件处理器或定时器回调,避免 this 丢失:
const user = {
name: 'Alice',
greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`);
}
};
// 锁定 this 为 user,并预设第一个参数 'Hello'
const boundGreet = user.greet.bind(user, 'Hello');
boundGreet('!'); // 输出:Hello, Alice!
boundGreet('?'); // 输出:Hello, Alice?
即使把 boundGreet 赋给全局变量或传入 setTimeout,this 仍指向 user,且首参始终是 'Hello'。
与箭头函数、call/apply 的关键区别
-
箭头函数:没有自己的
this,继承外层词法作用域 —— 不能动态绑定,也不支持bind改变this -
call/apply:立即执行,不返回可复用函数 -
bind:不执行,只返回一个新函数,this和预置参数永久固化,适合封装可复用、上下文确定的操作
注意点:new 操作符会覆盖 bind 的 this
如果用 new 调用 bind 后的函数,this 会被新创建的实例覆盖(符合构造函数语义),此时 bind 指定的 thisArg 无效。若需确保不可被 new 调用,可额外加防护逻辑,但通常包装函数本身就不该作为构造器使用。










