js中this的问题

Question

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

Answer 1

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

楼主的问题是因为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.

Answer 2

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

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

了解一下什么叫闭包

~分割线~

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

Answer 3

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

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

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

Answer 4

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

Answer 5

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

Answer 6

• 用let声明

• for改为foreach(map,reduce)

Answer 7

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

Answer 8

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

Answer 9

//....
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);
    };
  }

Answer 10

有答案说的很清楚了，在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);