bind()本质是返回新函数以永久锁定this值,确保在所有环境中调用时this指向不变,而非立即执行原函数。

JavaScript 函数绑定上下文的核心是控制 this 的指向,而原生 bind() 方法在 IE9 及以下版本中不可用,必须手动实现兼容逻辑。关键不在“能不能用”,而在“怎么让绑定行为在所有环境里表现一致”。
bind 的本质作用
bind() 不是立即执行函数,而是返回一个新函数,这个新函数具备两个确定性:
-
this 值被永久锁定:无论后续如何调用(直接调、作为事件处理器、被 new 调用),其内部
this都不会改变 - :bind 时传入的参数会排在最前,调用新函数时传入的参数追加在后
IE8 及更早版本的兼容要点
原生 Function.prototype.bind 在 IE9+ 才支持。要兼容低版本 IE,需手动挂载原型方法,并特别处理三类场景:
-
普通调用:
this应为 bind 传入的对象(若为null或undefined,则 fallback 到全局对象) -
new 调用:当用
new boundFn()实例化时,this必须指向新创建的实例,不能强制绑定到目标对象 -
原型链继承:bound 函数的
prototype必须能正确链接到原函数的prototype,否则instanceof和方法继承会失效
事件绑定中的上下文陷阱
在 DOM 事件中,this 默认指向触发事件的元素。若想让事件处理器里的 this 指向业务对象(比如用户数据对象),仅靠 addEventListener 不够:
立即学习“Java免费学习笔记(深入)”;
-
attachEvent(IE8-)中,this总是window,必须用call或apply显式修正 - 即使用了
bind,也要注意:IE8- 不支持addEventListener,所以兼容封装常需判断环境,再对回调做一次call(obj, event)包装 - 推荐写法是统一用
bind预绑定上下文 + 参数,再交由兼容函数注册事件,避免每次在事件回调里重复判断
替代方案与使用建议
如果不想手写 bind 兼容,可考虑更轻量的替代方式:
-
箭头函数:适合闭包内简单场景,但无法用于需要动态
this或构造函数的场合 - call/apply 即时调用:适用于只调用一次、无需复用的场景,不生成新函数
-
ES6 箭头函数 + 闭包变量:把对象引用存为外层变量,在箭头函数中直接访问,绕过
this绑定问题 -
现代项目建议:通过 Babel + core-js 自动注入
bindpolyfill,比手写更可靠且覆盖边界情况


















