今天在写一个小程序,遇到一个小问题,就是我想用setInterval函数定时调用某一个函数,而这个函数,又恰好是我的一个类的成员函数。最初,我是这样写的:
function ClassA()
{
this.i = 0;
this.start = function()
{
setInterval(this.callback,5000);
}
this.callback = function()
{
this.i++;
//alert(this);
}
}
var a = new ClassA();
a.start();
这段代码的目的,是希望让ClassA类中的成员函数callback,每隔5秒被调用一次,从而能让ClassA中的属性i自增。
但是,运行这段代码以后,我们发现,浏览器提示this.i不存在。为什么会出现这样的问题呢?我们在this.i++;下面加上alert语句,看看this到底是什么。结果显示,this是一个Object Window。而不是我们希望的对象a。为什么会这样呢?因为setInterval是一个Window类的成员函数,所以回调函数也从属于Window类了。
那如何解决这个问题呢?请看下面的代码:
function ClassA()
{
this.i = 0;
this.start = function()
{
var _this = this;
var callback = function(){ _this.callBack(); };
window.setInterval(callback,5000);
}
this.callback = function()
{
this.i++;
}
}
var a = new ClassA();
a.start();
在start成员函数中,我们用_this保存了ClassA的this,然后,定义了一个内部匿名函数,这个函数用于setInterval的回调,而在这个匿名函数中,通过_this来调用callBack,这样,就可以保证在调用callback函数时,this指针不是Window,而是对象a,大家可以细细的品味一下其中的奥秘~~
Ferris Xu (CoffeeCat)
2007-10-20