码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript定时器中的this指向

时间:2017-02-28 20:55:10      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:span   作用   作用域   rip   timeout   null   返回   div   需要   

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

直接上例子:

 1 var name = ‘my name is window‘;
 2 var obj = {
 3     name: ‘my name is obj‘,
 4     fn: function () {
 5         var timer = null;
 6         clearInterval(timer);
 7         timer = setInterval(function () {
 8             console.log(this.name);  //my name is window
 9         }, 1000)
10     }
11 }

在这里,从this.name可以看出this的指向是window。

如果没有特殊指向,setInterval和setTimeout的回调函数中this的指向都是window。这是因为JS的定时器方法是定义在window下的。但是平时很多场景下,都需要修改this的指向。这里总结了几种:

1、最常用的方法:在外部函数中将this存为一个变量,回调函数中使用该变量,而不是直接使用this。

 1 var name = ‘my name is window‘;
 2 var obj = {
 3     name: ‘my name is obj‘,
 4     fn: function () {
 5         var that = this;
 6         var timer = null;
 7         clearInterval(timer);
 8         timer = setInterval(function () {
 9             console.log(that.name);   //my name is obj
10         }, 1000)
11     }
12 }

在fn中加了var that = this; 回调函数中使用that代替this即可。这种方法最常见,使用也最广泛。

2、使用bind()方法(bind()为ES5的标准,低版本IE下有兼容问题,可以引入es5-shim.js解决)

bind()的作用类似call和apply,都是修改this指向。但是call和apply是修改this指向后函数会立即执行,而bind则是返回一个新的函数,它会创建一个与原来函数主体相同的新函数,新函数中的this指向传入的对象。

 1 var name = ‘my name is window‘;
 2 var obj = {
 3     name: ‘my name is obj‘,
 4     fn: function () {
 5         var timer = null;
 6         clearInterval(timer);
 7         timer = setInterval(function () {
 8             console.log(this.name);   //my name is obj
 9         }.bind(this), 1000)
10     }
11 }

在这里为什么不能用call和apply,是因为call和apply不是返回函数,而是立即执行函数,那么,就失去了定时器的作用。

3、使用es6的箭头函数:箭头函数的最大作用就是this指向。

 1 var name = ‘my name is window‘;
 2 var obj = {
 3     name: ‘my name is obj‘,
 4     fn: function () {
 5         var timer = null;
 6         clearInterval(timer);
 7         timer = setInterval(() => {
 8             console.log(this.name);  //my name is obj
 9         }, 1000)
10     }
11 }

箭头函数没有自己的this,它的this继承自外部函数的作用域。所以,在该例中,定时器回调函数中的this,是继承了fn的this。当然箭头函数也有兼容问题,要是兼容低版本ie,需要使用babel编译,并且引入es5-shim.js才可以。

 

Javascript定时器中的this指向

标签:span   作用   作用域   rip   timeout   null   返回   div   需要   

原文地址:http://www.cnblogs.com/443855539-wind/p/6480673.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!