js中this的问题

小宇
  • 423

如图,我这个setinterval中应该怎么取对应的subnav呢,谢谢

clipboard.png

回复
阅读 2.4k
10 个回答
✓ 已被采纳

反对楼上所有的答案!!!!!

楼主的问题是因为this的错误理解. 并不是你们所说的什么闭包好吧.

  • 第一处错误: this.index = i;
    此处的this指向的是window对象. 所以你的index是绑定到window对象上去了, 而不是对应的topics.

  • 第二处错误: 闭包内的this指向的是window, 而不是其外层function的调用者.
    你在subnavs[this.index]语句的上一句加上: console.log(this), 打印出的一定是window.

改正的办法很简单,

第一处错误改为topics[i].index = i;

setInterval的上一句加上var that = this; 然后后边的this.index改为that.index.

顺便推荐一下, 循环绑定事件最好是用forEach.

vsion
  • 5.1k

(function(i){ setInterval(function(){console.log(i)},5000) })(this.index);

匿名自调用函数(闭包).

了解一下什么叫闭包

~分割线~

题目是:
如图,我这个setinterval中应该怎么取对应的subnav呢,谢谢
仔细读十遍
可以说文中的this.index只是一个挂在window上的变量, 毫无任何用处.
通过闭包传入进去之后, 即可获取当前循环的i值(index)

因为这个setinterval是个异步的东西 代码从上到下直接过去了 等到执行的时候for循环都完事了

for(var i=0;i<4;i++){
  setInterval((function(i){
    console.log(i)
  })(i),1000)
}

大概写个闭包把那个i存住 这个你应该搜一个闭包的文章

循环里绑定事件,很容易出现这个问题。setInterval是异步执行的。等待执行的时候,i值已经循环接触了。所有你取得的i的值始终为topic.length。这是个很典型的问题。解决办法很多种,一般常用的是用闭包,如果不理闭包可以google下。闭包清楚了,这个问题就很容易解决了。

看你的编辑器是Hbuilder啊,webapp?直接使用let声明i吧,放心使用;其他的楼上都有。。

  • 用let声明

  • for改为foreach(map,reduce)

定时器里的this不再是上面的this。 你可以将两处this.index 都改为 _this.index ;

在外面放一个变量比如说
var that = this
然后在闭包里面用that来替换this

//....
for (var i = 0; i < 10; i++) {
  //...
  topics[i].onmouseout = handler(i);

}
function handler(a){
    return function(){
      var i = a;
      setTimeout(function(){
        console.log(i);
      }.bind(this),1000);
    };
  }
DustarMao
  • 1.2k

有答案说的很清楚了,在setInterval里传入的函数会重新绑定函数体内this的值,如果想避免这一点除了其他答案提到的在闭包里保存this为其他名称,然后再调用,像这样

var _this = this;
...
setInterval(function() {
  sidenav[_this.index]...;
}, 300);

还可以用没有独立this绑定的箭头函数

setInterval(() => {
  sidenav[this.index]...
}, 300);

不过这需要高es版本支持

再者可以用Function.prototype.bind手动绑定this

setInterval((function() {
  sidenav[this.index]...
}).bind(this), 300);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏