bind 是 JavaScript 中用于创建新函数的方法,永久绑定 this 值并预设部分参数,不立即执行原函数,返回函数的 this 不可被 call/apply 覆盖,且对箭头函数无效。

bind 是什么?它不是简单地“复制函数”
bind 是 JavaScript 中 Function.prototype 上的一个方法,用于创建一个**新函数**,这个新函数在被调用时,其 this 值会被永久绑定到 bind 的第一个参数上,且预设一部分参数(即“柯里化”)。
关键点在于:它不立即执行原函数,也不修改原函数;它返回一个全新函数,且该函数的 this 和部分参数已被固化 —— 即使后续用 call 或 apply 尝试覆盖 this,也无效(除非目标函数是箭头函数,但箭头函数本身没有 this,所以 bind 对它无实际效果)。
bind 如何创建绑定函数?看参数和返回行为
调用形式为:originalFn.bind(thisArg, arg1, arg2, ...)。其中:
-
thisArg:指定新函数执行时的this值;若传null或undefined,非严格模式下会指向全局对象(如window),严格模式下就是null/undefined -
arg1, arg2, ...:这些是“前置参数”,会在新函数被调用时,作为最前面的参数传给原函数 - 返回的新函数保留原函数的
length(形参个数),但只计算未被预设的剩余参数个数(即originalFn.length - 预设参数个数)
示例:
立即学习“Java免费学习笔记(深入)”;
function greet(greeting, punctuation) {
return `${greeting}, ${this.name}${punctuation}`;
}
const person = { name: 'Alice' };
const sayHello = greet.bind(person, 'Hello');
console.log(sayHello('!')); // "Hello, Alice!"这里 sayHello 是绑定后的新函数:this 永远是 person,greeting 被固定为 'Hello',调用时只需传入 punctuation。
bind 容易踩的坑:this 绑定不可逆、箭头函数无效、new 调用有特殊行为
bind 创建的函数一旦生成,其 this 就无法被 call/apply 改写 —— 这是设计特性,不是 bug。但新手常误以为能“二次绑定”:
-
fn.bind(obj1).bind(obj2)仍然以obj1为this,第二个bind无效 - 对箭头函数调用
bind不会改变它的this(因为箭头函数的this是词法绑定、不可配置) - 如果用
new调用绑定函数,它会忽略bind设定的this,转而构造新实例(此时this指向新对象),但预设参数仍生效
例如:
const bound = function() { return this.value; }.bind({ value: 42 });
console.log(bound()); // 42
console.log(bound.call({ value: 99 })); // 仍输出 42(call 失效)
console.log(new bound().value); // undefined(new 时 this 是新空对象,无 value 属性)bind 和 call/apply 的核心区别在哪?
三者都涉及 this 控制,但时机与目的不同:
-
call和apply:**立即执行**原函数,临时指定this和参数 -
bind:**不执行**,只返回一个“定制好this和部分参数”的新函数,供后续多次调用
换句话说:fn.call(obj, a, b) 是“现在就用 obj 跑一次 fn(a,b)”;fn.bind(obj, a) 是“造一个新函数,以后每次调用都等价于 fn.call(obj, a, ...)”。
真正容易被忽略的是:绑定函数的 name 属性会带 "bound " 前缀(如 bound greet),且它不可写、不可配置 —— 这在调试或依赖函数名的场景(如某些序列化、日志工具)中可能造成意外。











