美文网首页程序员
定时器中this的指向问题

定时器中this的指向问题

作者: 燕妮666_ | 来源:发表于2017-07-12 22:26 被阅读66次

setIntervalsetTimeout中如果出现this,那么这个this指向的是window对象,解决方法呢。目前我也只知道三种。
1.在外部函数中将this存为一个变量,回调函数总直接使用该变量,而不是this,代码如下:

var name = 'my name is window';
      var obj = {
    name: 'my name is obj',
    fn: function () {
        var that = this;
        var timer = null;
        clearInterval(timer);
       timer = setInterval(function () {
            console.log(that.name);   //my name is obj
       }, 1000)
   }
}

2.使用bind()方法,bind方法众所周知是用来事件绑定的,那他现在用在这里,是es5中的方法,如果低版本IE下有兼容问题,可以用es5-shim.js解决。bind和callapply类似,但是之所以不用call和apply,是因为他们是立即调用函数,不是返回函数,代码如下:

var name = 'my name is window';
    var obj = {
        name: 'my name is obj',
        fn: function () {
            var timer = null;
            clearInterval(timer);
            timer = setInterval(function () {
                console.log(this.name);   //my name is obj
            }.bind(this), 1000)
         }
     }

3.使用ES6语法的箭头函数,代码如下:

 var name = 'my name is window';
  var obj = {
      name: 'my name is obj',
      fn: function () {
         var timer = null;
          clearInterval(timer);
         timer = setInterval(() => {
             console.log(this.name);  //my name is obj
         }, 1000)
     }
 }

希望可以有所用处,我每天都会写下我所遇到的新知识,进步与你同在。fighting baby!!!!!

相关文章

  • 定时器中this的指向问题

    setInterval和setTimeout中如果出现this,那么这个this指向的是window对象,解决方法...

  • Javascript定时器中的this指向

    使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题。例如:var ...

  • This的指向总结

    1、//定时器中this的指向 结论:如果由定时器调用执行了某个函数,函数中有this,则这个this指向wind...

  • 函数中的this

    一,普通函数中的this指向,二,定时器方法中的this指向,三,构造函数中的this指向,四,对象方法中的thi...

  • JS中this的指向

    1、普通函数中this的指向( 普通函数中的this指针指向于调用者) 2、定时器中的this的指向 3、在对象...

  • aa.this的指向

    1. 普通函数中的this指向 普通函数this指向global也就是window 2. 定时器方法中的this指...

  • 定时器中的this指向

    先进一段JS代码 问题来了:为什么这里的console.log(1)只有执行了两次? 第一次是首次调用函数时输出的...

  • js中this的指向

    哪个对象调用函数,函数中的this指向那个对象 总结遇到的this指向的情况,直接上结论: 1.定时器,延时器中 ...

  • day06

    A.今天学到了什么 1.面向对象编程 2.继承 3.改变this指向 4.bind 5.定时器的指向问题 6.箭头...

  • day06

    A.今天学到了什么 1.面向对象编程 2.继承 3.改变this指向 4.bind 5.定时器的指向问题 6.箭头...

网友评论

    本文标题:定时器中this的指向问题

    本文链接:https://www.haomeiwen.com/subject/pedihxtx.html