【JS/TS】函数this丢失问题

今天在写一个显示当前时间的网页,用了一个回调,来每秒更新时间。
但是实际运行时,时间并没有动态更新。

原因

仔细查了一下,原来是 Javascript 函数的 this 是在调用函数时确定的。

foo.call(this,args...);

观察一下函数的call函数的签名,可以发现第一个参数传入了 this 的值,函数运行时的 this 就是调用时传入的 this。
而回调函数被执行时,this已经不是我们原来预想的this了,所以变量没有被更改。

解决

那么如果要用回调函数,使用原来的this,该怎么办呢?
函数里提供了bind函数,可以用来内定函数调用时this的值和参数。

foo.bind(this,args...);

而在bind时写的参数,在执行时就会被插入到参数列表的最前面,可以用来内定前几个参数的值。
调用了bind之后,返回的是一个新的函数,它的this和前几个参数已经被内定死了。
之后函数被调用时无论传入的this是什么,实际执行时的this始终都是bind时内定好的this

评论已关闭