`
dengyin2000
  • 浏览: 1226086 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

相关推荐

    Javascript类的继承,使用this.callParent调用超类方法

    在本话题中,我们将深入探讨JavaScript中的类继承,并特别关注`this.callParent`这个方法,它是如何被用来调用超类方法的。 首先,让我们了解JavaScript中的构造函数。构造函数是一种特殊的函数,用于创建和初始化...

    JavaScript程序设计-javascript中的this.pdf

    this.x = this.x + x; this.y = this.y + y; } }; point.moveTo(1, 1); // `this` 指向 `point` 对象 ``` 在这个例子中,`moveTo`方法内部的`this`指向`point`对象,因此能够修改`point`的`x`和`y`属性。 2....

    javascript中onclick(this)用法介绍

    3. javascript中onclick中的this:这是调用obj.value得到的结果,显示了触发事件的元素的value属性值。 总结来说,在javascript中,onclick(this)的用法主要是将当前被点击的元素作为上下文对象传递给事件处理函数...

    JavaScript中this指向.docx

    console.log(this.name); } var name = "xieliqun"; sayHello(); // 输出: xieliqun var obj = { name: "xiaoming", sayHello: function() { console.log(this.name); } }; obj.sayHello(); // 输出: ...

    Learn JavaScript with p5.js_Coding for Visual Learners-Apress(2018).pdf

    This book will present various JavaScript and p5.js features and concepts in the following chapters. The knowledge will be reinforced by building several useful examples like an animation and a data...

    JavaScript中this关键字使用方法详解

    console.log(this.name); } }; obj.sayName(); // 输出 "John" ``` 2. **全局上下文** 在全局作用域中,`this`指向全局对象。在浏览器环境中,全局对象是`window`;在Node.js中,全局对象是`global`。 ```...

    JavaScript中this指向.pdf

    这种特性使得this在JavaScript中具有了多重含义,对于初学者来说,确实是一个令人困惑的概念。 首先,需要明确的是,在JavaScript中,this关键字的指向不是在编译期确定的,而是在运行期确定的。这与大多数主流的...

    Leanpub.JavaScript.and.Node.FUNdamentals.May.2014

    在JavaScript中,“this”关键字的含义取决于调用函数的上下文。在非严格模式下,全局作用域中的“this”通常指向全局对象,在函数调用中“this”可能指向调用该函数的对象,或者在事件处理程序中指向触发事件的元素...

    详解javascript中的this对象.docx

    在这个例子中,`this`在`globalFunction`中指向`window`,因此`this.globalVar`访问到的是全局变量。 2. **函数调用中的`this`** 当函数作为普通函数调用时,`this`被设置为调用该函数的那个对象,或者在非严格...

    javascript.the.definitive.guide.5th.2006(英文版)

    This Fifth Edition is completely revised and expanded to cover JavaScript as it is used in today's Web 2.0 applications. This book is both an example-driven programmer's guide and a keep-on-your-desk ...

    详解javascript中的this对象.pdf

    构造函数中的 `this.name = name` 实际上是在新对象上创建了一个 `name` 属性。 ### 总结 理解 `this` 的工作原理对于编写 JavaScript 代码至关重要。`this` 的值取决于函数调用的上下文,而不是函数定义的位置。...

    javascript 中 this 的用法.docx

    this.name = name; } var person1 = new Person('Alice'); console.log(person1.name); // 'Alice' ``` 这里,通过 `new` 关键字调用 `Person` 函数,创建了一个新的对象,其 `name` 属性被设置为 `'Alice'`。 ##...

    解析 this.initialize.apply(this, arguments)

    标题 "解析 this.initialize.apply(this, arguments)" 涉及到的是JavaScript编程中的一个关键概念,尤其是在对象构造和类继承的情景下。`this` 关键字在JavaScript中扮演着核心角色,它指的是函数调用时的上下文,而...

    javascript 实现树.

    this.value = value; this.children = []; } ``` 2. **插入节点**: 要向树中添加新节点,我们需要一个方法来找到合适的位置并插入。这通常涉及遍历树的结构,找到合适的父节点,并将新节点添加到其`children`...

    详解Javascript 中的this指针.doc

    在上面的示例中,当`sayHi`作为一个全局函数调用时,`this`就是`window`,因此`this.name`等同于`window.name`。 2. **函数调用中的this**:如果一个函数作为对象的方法被调用,`this`将指向调用该方法的对象。例如...

    javascript高级编程.ppt

    alert(this.color); }; return oTempCar; } var oCar1 = createCar("red", 4, 23); var oCar2 = createCar("blue", 3, 25); oCar1.showColor(); // 输出 "red" oCar2.showColor(); // 输出 "blue" ``` 此外,...

    jsjavascript基础教程.zip

    【教程简介】 javascript基础 javascript游戏开发之贪吃蛇项目 javascript高级 nodejs开发 nosql数据之Mongodb 【javascript基础】 01-javascript的概述.md ...11-工厂方法_构造函数_this关键字.md

Global site tag (gtag.js) - Google Analytics