87,922
社区成员
发帖
与我相关
我的任务
分享js类 this关键字机制的疑问
最近用js+jQuery框架做一个广告图片轮询 因为考虑后期扩展性 所以把需求做成一个类来实现 但在js 时间动画函数中调用类的一个方法时遇到了问题 详细代码不贴出来了 太多 这里有个归纳版 大家帮忙看一下问题所在
如代码所示 this.value在类实例化后应该就是1 而在执行setInterval中this.value 就丢失了
请问是什么原因
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js测试</title>
<style type="text/css">
#shit{
width:200px;
height:30px;
background-color:#999999;
border:1px solid #006699;
padding:5px;
color:#FFFFFF;
}
</style>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
function Class_test(){
this.value=1; //一个标记 用于说明问题所在
this.timeID="";
}
Class_test.prototype.shown=function(){
var now=new Date();
if (this.value!=1){
$("#shit").html(now.getHours()+":"+now.getMinutes()+":"+now.getSeconds()+" "+this.value);
}
else{
$("#shit").html(now.getYear()+"-"+now.getMonth()+"-"+now.getDay()+" "+this.value);
}
}
Class_test.prototype.shownTurn=function(){
this.timeID=setInterval(this.shown,1000);
}
$(document).ready(function(){
var aa=new Class_test();
aa.shownTurn(); //直接调用类方法 this.value无法按需求显示标记值
//var timeID=setInterval(aa.shown,1000); //问题同上 无法显示this.value的值
});
</script>
</head>
<body>
<div id="shit"></div>
</body>
</html>
如代码所示 this.value在类实例化后应该就是1 而在执行setInterval中this.value 就丢失了
请问是什么原因
...全文
请发表友善的回复…
发表回复
Crazywa 2010-08-07
- 打赏
- 举报
还可以使用
fn.call(obj[,arg1][,arg2]..)
fn.apply(obj,arguments)
来将fn的this指向obj对象。
fn.call(obj[,arg1][,arg2]..)
fn.apply(obj,arguments)
来将fn的this指向obj对象。
relax19830426 2010-08-07
- 打赏
- 举报
已有正解 晚些时间结贴 欢迎讨论
relax19830426 2010-08-07
- 打赏
- 举报
2 楼 wtcsy
谢谢你的回复 本来还考虑你的oThis和倒数第二行(this)的问题 但是直接复制代码测试了下 是能用的 虽然你惜墨如金 没有注释 但还得请您指教下 这两个疑问 oThis表示的是?倒数第二行(this)表示的是？很困惑 请指教
3 楼 loaderce
谢谢你的回复 没有给他赋值时 声明变量的值是undefined 但是我这里是有给他赋值的 在类定义中 属性value 已经赋值为1 代码是 this.value=1; 一旦类实例化 实例的属性value就是1
4 楼 cloudgamer
谢谢你的回复 这个方法我最满意 其实这个我用的也挺多的 而且这个实例也测试过 可能我后面的写法和你不同而引起的测试错误 我后面的写法是 this.timeID=setInterval(o.shown,1000); 这里还是一个调用的问题 我还得体会下
谢谢你的回复 本来还考虑你的oThis和倒数第二行(this)的问题 但是直接复制代码测试了下 是能用的 虽然你惜墨如金 没有注释 但还得请您指教下 这两个疑问 oThis表示的是?倒数第二行(this)表示的是？很困惑 请指教
3 楼 loaderce
谢谢你的回复 没有给他赋值时 声明变量的值是undefined 但是我这里是有给他赋值的 在类定义中 属性value 已经赋值为1 代码是 this.value=1; 一旦类实例化 实例的属性value就是1
4 楼 cloudgamer
谢谢你的回复 这个方法我最满意 其实这个我用的也挺多的 而且这个实例也测试过 可能我后面的写法和你不同而引起的测试错误 我后面的写法是 this.timeID=setInterval(o.shown,1000); 这里还是一个调用的问题 我还得体会下
Crazywa 2010-08-07
- 打赏
- 举报
4楼正解。
cloudgamer 2010-08-07
- 打赏
- 举报
var o=this
this.timeID=setInterval(function(){o.shown()},1000);
this.timeID=setInterval(function(){o.shown()},1000);
loaderce 2010-08-07
- 打赏
- 举报
js函数里this代表的是触发这个函数的对象。当我们声明变量却没给他赋值的时候，这个变量值就为undefine，这是我理解，不知道对你问题有没有帮助。
wtcsy 2010-08-07
- 打赏
- 举报
Class_test.prototype.shownTurn=function(){
//this.timeID=setInterval(this.shown,1000);
this.timeID=setInterval((function(oThis){
return function(){
oThis.shown();
}
})(this),1000);
}relax19830426 2010-08-07
- 打赏
- 举报
在发帖结尾中突然想到一点 这个this.value在时间动画函数调用中 应该表示是这个动画函数调用的函数的一个实体 所以this此时是指向 Class_test.shown 方法函数的一个实例 而不是代表类本身 所以取属性value也就是取得的aa.shown属性value 故值是undefine 但是问题应该如何解决呢？或者说我这个分析不正确...
