self和this

self和this到底怎么用。我想在我生成的按钮中的click响应我生成的myclass.begin。但mylcass.begin执行的时候的this却不是myclass而是我生成的那个按钮。该如何处理这个问题？
<!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>JsClass</title>
</head>
<script language="javascript">
function $(str){return document.getElementById(str)}
function JsClass(){
var self=this;
this.num=0;
this.timeID="";
this.run=function(){
if(this.num>9){
clearInterval(this.timeID);
}
$("sss").innerHTMl=this.num;
this.num++;
}
this.begin=function(){
this.timeID=setInterval(function(){self.run()},300);
}
this.init=function(){
_creatElement("input",$("ss"),function(elm){elm.type="button";elm.value="开始";_addListener(elm,'click',self.begin)})
}
}
function _creatElement(etype,eparent,fun){
var elm=document.createElement(etype);
eparent.appendChild(elm);
if(fun) fun(elm);
}
function _addListener(elm,e,fun){
elm.addEventListener?elm.addEventListener(e,fun,false):elm.attachEvent('on'+e,fun)
}
var myclass=new JsClass();
onload=myclass.init;

</script>
<body><div id="ss"></div>
<div id="sss"></div>
</body></html>

解决方案 »

  1.   

    ...
        function JsClass(){
            var self=this;
            this.num=0;
    ...这里的self和this其实是一样的
      

  2.   

    按钮就是那个开始。  意图就是 点了开始以后，他开始执行myclass.begin。让myclass.num从0变到10
      

  3.   

    <!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>JsClass</title>
    </head>
    <script language="javascript">
        function $(str){return document.getElementById(str)}
        function JsClass(){
            var self=this;
            this.num=0;
            this.timeID="";
            this.run=function(){
               if(this.num>9){
                    clearInterval(this.timeID);
                }
                $("sss").innerHTML=this.num;
                this.num++;

            }
            this.begin=function(){
                self.timeID=setInterval(function(){self.run()},300);
            }
            this.init=function(){
                _creatElement("button",$("ss"),function(elm){elm.value="确定";_addListener(elm,'click',self.begin)})        
            }
        }
        function _creatElement(etype,eparent,fun){
            var elm=document.createElement(etype);
            eparent.appendChild(elm);
            if(fun)fun(elm);
        }
        function _addListener(elm,e,fun){
            elm.addEventListener?elm.addEventListener(e,fun,false):elm.attachEvent('on'+e,fun)
        }
        var myclass=new JsClass();
        window.onload=myclass.init;
        
    </script>
    <body><div id="ss"></div>
    <div id="sss"></div>
    </body></html>
      

  4.   


    用button的时候IE可以看到确定按钮，在FF是看不到的。
    所以我用的input
      

  5.   

    貌似主要在于这里的self.timeID,我原来写的是this.timeID。
    问题来了：
    为什么this.run中用到要用this。
    而this.begin中用到用到要用self。
    在我自己用的时候如果正确选择呢？
      

  6.   

    也可以用this.timeID
    self.timeID=setInterval(function(){self.run()},300); 
    function(){self.run()}必须这么写
    直接写this.run  this指向的不是JsClass;(应该是指向的匿名函数)
    在最前面定义了
    var self =this  (this是指向的JsClass)
    所以可以直接用在函数里面
      

  7.   

    当用成this.timeID时，this指向的是button按钮了。此时this.timeID是一个空变量了
      

  8.   

    点输入框以后 会出现从0-9的数字变化.
    我最终的目的其实是想  实例化多个JsClass的对象。
    譬如var myclass1=JsClass()
    var myclass2=new JsClass()
    并执行myclass1.init();myclass2.init();
    最后点击两个确定时，他们能各自独立运行