记一个在js中使用setTimeout方法踩的坑(箭头函数与function定义的区别)

原创
2019/10/07 22:11
阅读数 5.1K

问题:

今天写代码时遇到了一个问题,代码如下

      this.timer = setTimeout(function() {
        const result = []
        for (let i in this.cities) {
          this.cities[i].forEach((value) => {
            if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
              result.push(value)
            }
          })
        }
        console.log(this.cities)
        this.list = result
      }, 100)

其中最主要的问题就是倒数第三行代码输出的是undefined(在方法外输出确实有值)

经过一番排错后发现,是ES6的箭头函数() => {}function(){}定义的方法中,this的指向有问题

使用function定义的函数,this的指向随着调用环境的变化而变化的,而箭头函数中的this指向是固定不变的,一直指向的是定义函数的环境。

因此我上面的方法

 

解决方案:

把使用function的地方改掉,改用箭头函数的方式来定义,可以正常输出,如下:

      this.timer = setTimeout(() => {
        const result = []
        for (let i in this.cities) {
          this.cities[i].forEach((value) => {
            if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
              result.push(value)
            }
          })
        }
        console.log(this.cities)
        this.list = result
      }, 100)

或者,将函数内的this固定,如下定义一个const that = this   :

      const that = this
      this.timer = setTimeout(function() {
        const result = []
        for (let i in that.cities) {
          that.cities[i].forEach((value) => {
            if (value.spell.indexOf(that.keyword) > -1 || value.name.indexOf(that.keyword) > -1) {
              result.push(value)
            }
          })
        }
        console.log(that.cities)
        that.list = result
      }, 100)

都可以完美实现

=。=这bug吓死我了,我还以为我前面都写错了。。。(毕竟我也不是很熟练啊)

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部