Javascript中的this跟Java中的this不一样,可能在创建对象的时候是一样的,但是当运行的时候,可能javascript中的this,可能就会变成另外一个对象。如果不熟悉javascript编程的人遇到这种情况时,很有可能会觉得莫名其妙。怎么定义的函数或者属性总是undefined呢?
[code]
//@parm timeout_time if user is not active for the time, we will consider the user should be away and should make time right now.
//@parm interval_detect_timeout_time which is a timer, it will invoke "detectUserOperation" to detect whether should set onTimeout event.
function TimeoutComponent(timeout_time, interval_detect_timeout_time){
this.timeoutTime = timeout_time;
this.intervalDetectTimeoutTime = interval_detect_timeout_time;
this.detectUserOperationTimer = this.startDetect();
this.lastOperationTimestamp = new Date().getTime();
alert(this.lastOperationTimestamp);
}
TimeoutComponent.prototype.detectUserOperation = function(){
var currentTime = new Date().getTime();
var intervalTime = currentTime - this.lastOperationTimestamp;
if (intervalTime > this.timeoutTime){
//send the onTimeout event, user should override this method to customize timeout behavior
this.onTimeout();
//stop interval detect now.
this.stopDetect();
}
};
TimeoutComponent.prototype.onTimeout = function(){
};
TimeoutComponent.prototype.getTimeoutValue = function(){
return this.timeoutTime;
};
TimeoutComponent.prototype.getIntervalValue = function(){
return this.intervalDetectTimeoutTime;
};
TimeoutComponent.prototype.stopDetect = function(){
window.clearInterval(this.detectUserOperationTimer);
};
TimeoutComponent.prototype.startDetect = function(){
[b]var timer = window.setInterval(this.detectUserOperation, this.intervalDetectTimeoutTime);[/b]
return timer;
};
TimeoutComponent.prototype.updateLastOperationTime = function(){
this.lastOperationTimestamp = new Date().getTime();
};
[/code]
上面是一个javascript 对象,注意上面的粗体部分。在创建这个对象时(new TimeoutComponent(60000, 30000))没有问题, 然后当运行时,我们会发现在detectUserOperation函数中的this.lastOperationTimestamp属性变成了undefined。本来这是我们TimeoutComponent对象中的一个属性,怎么现在变成undefined了呢? 当我在firefox下面调式时发现这个this已经变成了Window对象了。 难怪会找不到。 ok。问题找到了,我该怎么解决呢? ??? 想了一点时间,隐约记得以前用过dojo.lang.hitch这个方法是来处理这种情况的。ok。 改了下代码。刷新页面,ok 现在没有问题了。
[code]
TimeoutComponent.prototype.startDetect = function(){
var timer = window.setInterval(dojo.lang.hitch(this, this.detectUserOperation), this.intervalDetectTimeoutTime);
return timer;
};
[/code]
看看dojo做了什么事情。。
[code]/**
* Runs a function in a given scope (thisObject), can
* also be used to preserve scope.
*
* hitch(foo, "bar"); // runs foo.bar() in the scope of foo
* hitch(foo, myFunction); // runs myFunction in the scope of foo
*/
dojo.lang.hitch = function(thisObject, method) {
if(dojo.lang.isString(method)) {
var fcn = thisObject[method];
} else {
var fcn = method;
}
return function() {
return fcn.apply(thisObject, arguments);
}
}[/code]
ok。 现在清楚了吧。
[code]
//@parm timeout_time if user is not active for the time, we will consider the user should be away and should make time right now.
//@parm interval_detect_timeout_time which is a timer, it will invoke "detectUserOperation" to detect whether should set onTimeout event.
function TimeoutComponent(timeout_time, interval_detect_timeout_time){
this.timeoutTime = timeout_time;
this.intervalDetectTimeoutTime = interval_detect_timeout_time;
this.detectUserOperationTimer = this.startDetect();
this.lastOperationTimestamp = new Date().getTime();
alert(this.lastOperationTimestamp);
}
TimeoutComponent.prototype.detectUserOperation = function(){
var currentTime = new Date().getTime();
var intervalTime = currentTime - this.lastOperationTimestamp;
if (intervalTime > this.timeoutTime){
//send the onTimeout event, user should override this method to customize timeout behavior
this.onTimeout();
//stop interval detect now.
this.stopDetect();
}
};
TimeoutComponent.prototype.onTimeout = function(){
};
TimeoutComponent.prototype.getTimeoutValue = function(){
return this.timeoutTime;
};
TimeoutComponent.prototype.getIntervalValue = function(){
return this.intervalDetectTimeoutTime;
};
TimeoutComponent.prototype.stopDetect = function(){
window.clearInterval(this.detectUserOperationTimer);
};
TimeoutComponent.prototype.startDetect = function(){
[b]var timer = window.setInterval(this.detectUserOperation, this.intervalDetectTimeoutTime);[/b]
return timer;
};
TimeoutComponent.prototype.updateLastOperationTime = function(){
this.lastOperationTimestamp = new Date().getTime();
};
[/code]
上面是一个javascript 对象,注意上面的粗体部分。在创建这个对象时(new TimeoutComponent(60000, 30000))没有问题, 然后当运行时,我们会发现在detectUserOperation函数中的this.lastOperationTimestamp属性变成了undefined。本来这是我们TimeoutComponent对象中的一个属性,怎么现在变成undefined了呢? 当我在firefox下面调式时发现这个this已经变成了Window对象了。 难怪会找不到。 ok。问题找到了,我该怎么解决呢? ??? 想了一点时间,隐约记得以前用过dojo.lang.hitch这个方法是来处理这种情况的。ok。 改了下代码。刷新页面,ok 现在没有问题了。
[code]
TimeoutComponent.prototype.startDetect = function(){
var timer = window.setInterval(dojo.lang.hitch(this, this.detectUserOperation), this.intervalDetectTimeoutTime);
return timer;
};
[/code]
看看dojo做了什么事情。。
[code]/**
* Runs a function in a given scope (thisObject), can
* also be used to preserve scope.
*
* hitch(foo, "bar"); // runs foo.bar() in the scope of foo
* hitch(foo, myFunction); // runs myFunction in the scope of foo
*/
dojo.lang.hitch = function(thisObject, method) {
if(dojo.lang.isString(method)) {
var fcn = thisObject[method];
} else {
var fcn = method;
}
return function() {
return fcn.apply(thisObject, arguments);
}
}[/code]
ok。 现在清楚了吧。