JS这么写不理解

本帖最后由 alavs 于 2011-2-24 21:16 编辑 <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数字时钟--不支持IE</title><script>
window.onload=function(){
var clock1=new DigitClock();
}function DigitClock(){
  DigitClock.clocks.push(this);
  this.container=document.getElementById("textClock");
  }
  DigitClock.clocks=[];
  DigitClock.redraw=function(){
   var NowTime=new Date();
   for(i=0;i<this.clocks.length;i++){
     this.clocks.SetTime(NowTime.getHours(),NowTime.getMinutes(),NowTime.getSeconds());
   }
   }
  DigitClock.prototype={
   SetTime:function(h,i,s){
    this.container.innerHTML=h+":"+i+":"+s
    }
   }
  setInterval(function(){
   DigitClock.redraw();
   },1000)
</script></head>
<body>
<div id="textClock">
</div>
</body>
</html>
看视频教程，最终效果是会把数字都换成图片，但是讲到这里的时候我就有一个不理解的地方了。DigitClock是个对象，DigitClock.clocks是存储多个此对象的实例的数组，但是我不明白为什么要把多个实例存储起来；在redraw()方法里面调用SetTime()的时候为什么要用一个FOR循环，我认为只要一个实例就够了...我把里面的FOR循环和DigitClock.clocks去掉了，然后把redraw()方法写成这样：DigitClock.redraw=function(){
   var NowTime=new Date();
     this.SetTime(NowTime.getHours(),NowTime.getMinutes(),NowTime.getSeconds());
   }但是textClock里没有显示时间了，想不通为什么？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

改了下，不需要多个实例。<html >
<head>
<title>时钟</title>
</head>
<body>
<script>
window.onload = function() {
    var clock1 = new DigitClock();
}function DigitClock() {
var self = this;
this.container = document.getElementById("textClock");
setInterval(function(){self.redraw();}, 1000);
}
DigitClock.prototype = {
redraw : function(){
var NowTime = new Date();
this.SetTime(NowTime.getHours(), NowTime.getMinutes(), NowTime.getSeconds());
},
    SetTime: function(h, i, s) {
        this.container.innerHTML = h + ":" + i + ":" + s;
    }
}
</script>
<div id="textClock"></div>
</body>
</html>
使用数组是为了存放当前调用的DigitClock实例，在后面调用，lz贴出来的代码有误，我整理了一下。<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数字时钟--不支持IE</title><script>
window.onload=function(){
var clock1=new DigitClock();
}function DigitClock(){
  DigitClock.clocks.push(this);//这里保存实例
  this.container=document.getElementById("textClock");
   setInterval(function(){DigitClock.redraw(); } ,1000);
}  DigitClock.clocks=[];
  DigitClock.redraw=function(){
  var NowTime=new Date();
  for(i=0;i<this.clocks.length;i++){
          //这里调用当前实例
  this.clocks[i].SetTime(NowTime.getHours(),NowTime.getMinutes(),NowTime.getSeconds());
  }
  }
  DigitClock.prototype={
  SetTime:function(h,i,s){
  this.container.innerHTML=h+":"+i+":"+s;
  }
  }

</script></head>
<body>
<div id="textClock">
</div>
</body>
</html>
lz要做成单个实例的话，1楼已经解决了。
楼主没有正确理解this的含义，如果把redraw()方法写成这样：DigitClock.redraw=function(){
  var NowTime=new Date();
    this.SetTime(NowTime.getHours(),NowTime.getMinutes(),NowTime.getSeconds());
  }
这个函数里面的this的值并不是你想像的当前实例，所以this下面没有SetTime方法， this.SetTime()会报错，不会执行，所以textClock里没有显示时间了。
说的更明白点，这里的 this 如果LZ用 alert(this); 语句输出就会发现，它代表是 DigitClock 这个函数对象，不是任何的对象实例。
Littlesatan,谢谢！说中我的问题所在！
Free_Wind22，解决了我的问题！THANKS!
数组的问题，看下面改过的例子就知道了：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数字时钟</title>
<script>
DigitClock.clocks = [];function DigitClock(id) {
DigitClock.clocks.push(this); //这里保存实例
this.container = document.getElementById(id);
setInterval(function() {
DigitClock.redraw();
},
1000);
}
DigitClock.redraw = function() {
var NowTime = new Date();
for (i = 0; i < this.clocks.length; i++) {
//这里调用当前实例
this.clocks[i].SetTime(NowTime.getHours(), NowTime.getMinutes(), NowTime.getSeconds());
}
}
DigitClock.prototype = {
SetTime: function(h, i, s) {
this.container.innerHTML = h + ":" + i + ":" + s;
}
}window.onload = function() {
var clock1 = new DigitClock("textClock");
var clock2 = new DigitClock("theforever");
}
</script>
</head>
<body>
<div id="textClock">
</div>
<div id="theforever">
</div>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数字时钟</title>
<script>
function DigitClock(id) {
    var self = this;//指向实例
    this.container = document.getElementById(id);
    setInterval(function(){self.redraw();}, 1000);
}
DigitClock.prototype = {
    redraw : function(){
        var NowTime = new Date();
        this.SetTime(NowTime.getHours(), NowTime.getMinutes(), NowTime.getSeconds());
    },
    SetTime: function(h, i, s) {
        this.container.innerHTML = h + ":" + i + ":" + s;
    }
}window.onload = function() {
var clock1 = new DigitClock("textClock");
var clock2 = new DigitClock("theforever");
}
</script>
</head>
<body>
<div id="textClock">
</div>
<div id="theforever">
</div>
</body>
</html>