Function.prototype.bind() 的妙用–修改 this 指向

除了 ES6中 的箭头函数,ES5 中如何修正 setTimeout(),$.ajax 等等中的”this”指向不正确。

假设当前页面上有一个 ID 为"btn_demo"的按钮,我想点击之后三秒改变背景色,第一直觉可能会写出以下代码:

结果在 chrome 中提示Uncaught TypeError: Cannot set property 'backgroundColor' of undefined,原因是在 setTimeout() 中,this 指向了window (全局)对象,而不是当前触发事件的对象。解决这个问题,可以显式传入外层 this:

或者使用 ES6 中的箭头函数,原理与上面的一致:

但是,ES5 已经为我们提供了一种更为优雅与健壮,并且适用性更强的方法:

比如在类的实例方法中,使用第bind()方法来修改 this 的指向:

Function.prototype.bind()

第一次见到这个方法,是在 Reactjs 中:有这样一段代码,为了解决 $.ajax 中 this 指向 $.ajax 对象的问题:

一开始我并未在意,以为是 Reactjs 的魔术方法,直到阅读如下代码:

引申出Function对象的三大原型方法,call()apply()以及bind(),联想到reactjs中的用法,让我很惊喜,唯一不足的地方是只支持IE9+。

小结

这三个原型方法很少会用到,是偏方,但治疗一些疑难杂症却是有奇效。

我在这里只做一个抛砖引玉的作用,其他用法与例子参考 MDN 的文档是最好的选择,我就不复制粘贴了。

参考链接:MDN:call()MDN:apply()MDN:bind()

发表评论