JavaScript中setInterval与this作用域问题的解决方案

 
function foo()
{ 
} 
setInterval( "foo()", 1000 );

若采用面向对象（OO）的技术架构，实现方式可调整为：

 
// 构造函数定义
function MyObj
{ 
function foo()
{ 
alert( this.data );
} 
this.timer = foo;
this.data = "Hello";
setInterval( "this.timer()", 1000 );
} 
function Another()
{ 
// 在创建对象时启动定时器
var obj = new MyObj();
} 

直接引用对象与闭包解决方案

然而，这种写法无法按预期运行。核心原因在于setInterval()函数在解析字符串参数时，无法正确识别this变量所指向的上下文。一种可行的变通方案如下所示。

 
function Another()
{ 
var obj = new MyObj();
setInterval( “obj.timer()”, 1000 );
} 

虽然上述方法可以正常运行，但对于追求代码完美性的开发者而言，这种将定时器启动逻辑暴露给外部的做法并不理想。幸运的是，我们可以将该动作封装进构造函数内部，虽然形式上有所变化，但逻辑更加内聚。

 
// 构造函数定义
function MyObj
{ 
function foo()
{ 
alert( this.data );
} 
this.timer = foo;
this.data = "Hello";
var self = this;
setInterval( function() { self.timer(); }, 1000 );
} 
function Another()
{ 
var obj = new MyObj();
} 

通过引入闭包机制，问题得以解决。具体原理建议读者结合JavaScript的作用域链自行深入思考。

综合测试用例分析

最后，提供一个包含多种测试用例的完整HTML示例供参考。

 
<html>
<head>
<title>
Hello Timer
</title>
<script language = "JScript">
/* 
* 此处包含三个类的实现逻辑。
* 
* 1. 定时器运行正常且结果正确
* 2. 定时器运行但结果错误
* 3. 定时器无法启动
* 
*/ 
function Obj()
{ 
function foo()
{ 
alert( this.timer );
} 
this.timer = foo;
// 
var me = this;
var f = function() { me.timer(); };
var f2 = function() { this.timer(); };
// 第一种类别
//setInterval( f, 1000 );
// 第三种类别
//setInterval( f2, 1000 );
// 第二种类别
//setInterval( me.timer, 1000 );
//setInterval( this.timer, 1000 );
//setInterval( foo, 1000 );
// 第三种类别
//setInterval( "this.timer()", 1000 );
//setInterval( "me.timer()", 1000 );
//setInterval( "foo()", 1000 );
} 
var o = null;
function OnClick()
{ 
o = new Obj();
// 第一种类别
//setInterval( "o.timer()", 1000 );
setInterval( function() { o.timer(); }, 1000 );
// 第二种类别
//setInterval( o.timer, 1000 );
} 
</script>
</head>
<body>
<input type = "button" onclick = "OnClick()" value = "Click me"></input>
</body>
</html>