Javascript中的this.

Javascript中的this跟Java中的this不一样，可能在创建对象的时候是一样的，但是当运行的时候，可能javascript中的this，可能就会变成另外一个对象。如果不熟悉javascript编程的人遇到这种情况时，很有可能会觉得莫名其妙。怎么定义的函数或者属性总是undefined呢？

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

上面是一个javascript 对象，注意上面的粗体部分。在创建这个对象时(new TimeoutComponent(60000, 30000))没有问题， 然后当运行时，我们会发现在detectUserOperation函数中的this.lastOperationTimestamp属性变成了undefined。本来这是我们TimeoutComponent对象中的一个属性，怎么现在变成undefined了呢？ 当我在firefox下面调式时发现这个this已经变成了Window对象了。 难怪会找不到。 ok。问题找到了，我该怎么解决呢？ ？？？  想了一点时间，隐约记得以前用过dojo.lang.hitch这个方法是来处理这种情况的。ok。 改了下代码。刷新页面，ok 现在没有问题了。

TimeoutComponent.prototype.startDetect = function(){
	var timer = window.setInterval(dojo.lang.hitch(this, this.detectUserOperation), this.intervalDetectTimeoutTime);
	return timer;
};

看看dojo做了什么事情。。

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

ok。 现在清楚了吧。

评论

7 楼 sp42 2007-04-07  

改变当前指针的对象可以用apply() or call()
但会立即执行
ext的creatDelegat()委托好用
改变当前指针的对象之余并不执行，返回一个function

6 楼 dengyin2000 2007-04-04  

cozone_柯中 写道

dengyin2000 写道

cozone_柯中 写道

dengyin2000 写道

yes. 问题肯定是调用 Window.setInterval引起的

为了避免类似的问题，在调用 setTimeout 和 setInterval 这样的方法的时候直接引用实例化变量还是更可靠些，

按照dojo 的 dojo.lang.hitch 方法 this.detectUserOperation 再次加入到 this变量里了

不是很明白你这里说的， 你的意思是detectUserOperation这个方法， 写在window scope里面，而不是放在TimeoutComponent class里面么？ 但是这样的话，使用class有什么意义

我并没有否认 采用 dojo.lang.hitch  方法, 这个方法无疑是最好的解决办法,可是对于象
setTimeout 和 setInterval 这样比较特殊的调用时写一个类似与java里面的单例类，统一管理，还是好些，所以要把 detectUserOperation 方法抽出来

提取出来不是很合理，因为我这里想把这个做成一个component。

换成其他的单立类在运行中this是不是会变成哪个单立类的scope。 你能否给下你的sample。

5 楼 cozone_柯中 2007-04-04  

dengyin2000 写道

cozone_柯中 写道

dengyin2000 写道

yes. 问题肯定是调用 Window.setInterval引起的

为了避免类似的问题，在调用 setTimeout 和 setInterval 这样的方法的时候直接引用实例化变量还是更可靠些，

按照dojo 的 dojo.lang.hitch 方法 this.detectUserOperation 再次加入到 this变量里了

不是很明白你这里说的， 你的意思是detectUserOperation这个方法， 写在window scope里面，而不是放在TimeoutComponent class里面么？ 但是这样的话，使用class有什么意义

我并没有否认 采用 dojo.lang.hitch  方法, 这个方法无疑是最好的解决办法,可是对于象
setTimeout 和 setInterval 这样比较特殊的调用时写一个类似与java里面的单例类，统一管理，还是好些，所以要把 detectUserOperation 方法抽出来

4 楼 dengyin2000 2007-04-04  

cozone_柯中 写道

dengyin2000 写道

yes. 问题肯定是调用 Window.setInterval引起的

为了避免类似的问题，在调用 setTimeout 和 setInterval 这样的方法的时候直接引用实例化变量还是更可靠些，

按照dojo 的 dojo.lang.hitch 方法 this.detectUserOperation 再次加入到 this变量里了

不是很明白你这里说的， 你的意思是detectUserOperation这个方法， 写在window scope里面，而不是放在TimeoutComponent class里面么？ 但是这样的话，使用class有什么意义

3 楼 cozone_柯中 2007-04-03  

dengyin2000 写道

yes. 问题肯定是调用 Window.setInterval引起的

为了避免类似的问题，在调用 setTimeout 和 setInterval 这样的方法的时候直接引用实例化变量还是更可靠些，

按照dojo 的 dojo.lang.hitch 方法 this.detectUserOperation 再次加入到 this变量里了

2 楼 dengyin2000 2007-04-03  

yes. 问题肯定是调用 Window.setInterval引起的

1 楼 cozone_柯中 2007-04-03  

引用

在创建这个对象时(new TimeoutComponent(60000, 30000))没有问题， 然后当运行时，我们会发现在detectUserOperation函数中的this.lastOperationTimestamp属性变成了undefined。本来这是我们TimeoutComponent对象中的一个属性，怎么现在变成undefined了呢？ 当我在firefox下面调式时发现这个this已经变成了Window对象了。 难怪会找不到。

不好意思,刚才搞错了

拿到本地测试了下

发现问题出现的根本原因是 setTimeout 和 setInterval 是系统发出的调用命令,所以在window作用域下,所以 this指针直向的是 window