【JS / TS】函数 this 丢失问题
warning:
这篇文章距离上次修改已过473天,其中的内容可能已经有所变动。
今天在写一个显示当前时间的网页,用了一个回调,来每秒更新时间。
但是实际运行时,时间并没有动态更新。
原因
仔细查了一下,原来是 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
。
评论已关闭