js继承的问题


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{width:100px;height:100px;background-color:#06F;position:absolute;}
#div2{width:100px;height:100px;background-color:#FF0;position:absolute;right:8px;top:8px;}
</style>
<script src="div移动.js"></script>
<script src="div移动2.js"></script>
<script>
window.onload=function()
{
new CreatDiv("div1")
new CreatDiv2("div2");
};
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>布局部分function CreatDiv(id)
{
//this.index1=this;
var _this=this;
this.speed=20;
this.X=0;
this.Y=0;
this.oDiv=document.getElementById(id);
this.l=null;
this.t=null;

setInterval(function(){
_this.l=_this.oDiv.offsetLeft+_this.X;
_this.t=_this.oDiv.offsetTop+_this.Y;
_this.oDiv.style.left=_this.l+"px";
_this.oDiv.style.top=_this.t+"px";
},16)

document.onkeydown=function(ev)
{
_this.keyDown(ev);
}
document.onkeyup=function(ev)
{
_this.keyUp(ev);
}

}
CreatDiv.prototype.keyDown=function(ev)
{
var oEvent=ev||event;
switch(oEvent.keyCode)
{
case 65:
this.X=-(this.speed);//左
break;
case 87:
this.Y=-(this.speed);//上
break;
case 68:
this.X=this.speed;//右
break;
case 83:
this.Y=this.speed;//下
break;
}
}
CreatDiv.prototype.keyUp=function(ev)
{
var oEvent=ev||event;
switch(oEvent.keyCode)
{
case 65:
this.X=0;//左
break;
case 87:
this.Y=0;//上
break;
case 68:
this.X=0;//右
break;
case 83:
this.Y=0;//下
break;
}
}父类function CreatDiv2(id)
{
//this=new Object();
CreatDiv.call(this,id);
}
CreatDiv2.prototype.keyDown=function(ev)
{
var oEvent=ev||event;
switch(oEvent.keyCode)
{
case 37:
this.X=-(this.speed);//左
break;
case 38:
this.Y=-(this.speed);//上
break;
case 39:
this.X=this.speed;//右
break;
case 40:
this.Y=this.speed;//下
break;
}
}
CreatDiv2.prototype.keyUp=function(ev)
{
var oEvent=ev||event;
switch(oEvent.keyCode)
{
case 37:
this.X=0;//左
break;
case 38:
this.Y=0;//上
break;
case 39:
this.X=0;//右
break;
case 40:
this.Y=0;//下
break;
}
}子类
-------------------------------------------------------
子类继承了父类的属性,没有继承父类的方法.
子类自己有一套自己的方法,为什么只能控制子类的div的移动,而父类的div无法操作?JavaScript

解决方案 »

  1.   

    因为父类和子类的构造函数都做了绑定onkeydown(onkeyup)事件的操作    document.onkeydown=function(ev)
        {
            _this.keyDown(ev);
        }
        document.onkeyup=function(ev)
        {
            _this.keyUp(ev);
        }而子类对象比父类对象后创建，父类的绑定被子类覆盖了
      

  2.   

    2楼正解。
    只要子类的对象创建之前已经有父类对象被创建，那么documen的keydown和keyup事件绑定的就是子类对象中的函数。反之，亦然：如果子类对象先创建，父类对象后创建，那么绑定的函数就是父类对象中的函数。即：
    如果只创建一个对象，那么document绑定的就是该对象对应的类中的函数。
    如果父子类都有对象生成，那么document绑定的就是最后创建的对象对应的类中的函数。
      

  3.   

    子类keydown,keyup事件覆盖了父类事件,所以无法移动
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    #div1{width:100px;height:100px;background-color:#06F;position:absolute;}
    #div2{width:100px;height:100px;background-color:#FF0;position:absolute;right:8px;top:8px;}
    </style>
    <script>
    function addEvent(oTarget, sEventType, fnHandler){
    if( oTarget.addEventListener){
    oTarget.addEventListener(sEventType, fnHandler, false);
    }else if( oTarget.attachEvent ){
    oTarget.attachEvent("on" + sEventType, fnHandler);
    }else{
    oTarget["on" + sEventType] = fnHandler;
    }
    }
    function CreatDiv(id)
    {
        //this.index1=this;
        var _this=this;
        this.speed=20;
        this.X=0;
        this.Y=0;
        this.oDiv=document.getElementById(id);
        this.l=null;
        this.t=null;
         
        setInterval(function(){
            _this.l=_this.oDiv.offsetLeft+_this.X;
            _this.t=_this.oDiv.offsetTop+_this.Y;
            _this.oDiv.style.left=_this.l+"px";
            _this.oDiv.style.top=_this.t+"px";        
        },16)
         
    /*document.onkeydown=function(ev)
        {
            _this.keyDown(ev);
        }
        document.onkeyup=function(ev)
        {
            _this.keyUp(ev);
        }*/
    addEvent(document, "keydown", function(ev){_this.keyDown(ev);});
    addEvent(document, "keyup", function(ev){_this.keyUp(ev);});
         
    }
    CreatDiv.prototype.keyDown=function(ev)
    {
        var oEvent=ev||event;
        switch(oEvent.keyCode)
        {
            case 65:
                this.X=-(this.speed);//左
                break;
            case 87:
                this.Y=-(this.speed);//上
                break;
            case 68:
                this.X=this.speed;//右
                break;
            case 83:
                this.Y=this.speed;//下
                break;
        }
    }
    CreatDiv.prototype.keyUp=function(ev)
    {
        var oEvent=ev||event;
        switch(oEvent.keyCode)
        {
            case 65:
                this.X=0;//左
                break;
            case 87:
                this.Y=0;//上
                break;
            case 68:
                this.X=0;//右
                break;
            case 83:
                this.Y=0;//下
                break;
        }
    }
    function CreatDiv2(id)
    {
        //this=new Object();
        CreatDiv.call(this,id);
    }
    CreatDiv2.prototype.keyDown=function(ev)
    {
        var oEvent=ev||event;
        switch(oEvent.keyCode)
        {
            case 37:
                this.X=-(this.speed);//左
                break;
            case 38:
                this.Y=-(this.speed);//上
                break;
            case 39:
                this.X=this.speed;//右
                break;
            case 40:
                this.Y=this.speed;//下
                break;
        }
    }
    CreatDiv2.prototype.keyUp=function(ev)
    {
        var oEvent=ev||event;
        switch(oEvent.keyCode)
        {
            case 37:
                this.X=0;//左
                break;
            case 38:
                this.Y=0;//上
                break;
            case 39:
                this.X=0;//右
                break;
            case 40:
                this.Y=0;//下
                break;
        }
    }
    </script>
    <script>
    window.onload=function()
    {
        new CreatDiv("div1")
        new CreatDiv2("div2");
    };
    </script>
    </head>
    <body>
    <div id="div1"></div>
    <div id="div2"></div>
    </body>
    </html>