当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript开发面向对象教程之继承

JavaScript开发面向对象教程之继承

2017年12月25日  | 移动技术网IT编程  | 我要评论

JavaScript开发面向对象教程之继承。

这里写图片描述

面向对象的拖拽
改写原有拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<style>
#p1 {width:100px; height:100px; background:red; position:absolute;}
#p2 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    new Drag('p1');
    new Drag('p2');
};

function Drag(id)
{
    var _this=this;

    this.disX=0;
    this.disY=0;
    this.oDiv=document.getElementById(id);

    this.oDiv.onmousedown=function ()
    {
        _this.fnDown();
    };
}

Drag.prototype.fnDown=function (ev)
{
    var _this=this;
    var oEvent=ev||event;
    this.disX=oEvent.clientX-this.oDiv.offsetLeft;
    this.disY=oEvent.clientY-this.oDiv.offsetTop;

    document.onmousemove=function ()
    {
        _this.fnMove();
    };

    document.onmouseup=function ()
    {
        _this.fnUp();
    };
};

Drag.prototype.fnMove=function (ev)
{
    var oEvent=ev||event;

    this.oDiv.style.left=oEvent.clientX-this.disX+'px';
    this.oDiv.style.top=oEvent.clientY-this.disY+'px';
};

Drag.prototype.fnUp=function ()
{
    document.onmousemove=null;
    document.onmouseup=null;
};
</script>
</head>

<body>
<p id="p1">
</p>
<p id="p2">
asdf
</p>
</body>
</html>

对象的继承
什么是继承
在原有类的基础上，略作修改，得到一个新的类
不影响原有类的功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function Person(name, sex)
{
    this.name=name;
    this.sex=sex;
}

Person.prototype.showName=function ()
{
    alert(this.name);
};

Person.prototype.showSex=function ()
{
    alert(this.sex);
};

//-------------------------------------

function Worker(name, sex, job)
{
    //this->new出来的Worker对象
    //构造函数伪装        调用父级的构造函数——为了继承属性
    Person.call(this, name, sex);

    this.job=job;
}

//原型链       通过原型来继承父级的方法
//Worker.prototype=Person.prototype;

for(var i in Person.prototype)
{
    Worker.prototype[i]=Person.prototype[i];
}

Worker.prototype.showJob=function ()
{
    alert(this.job);
};

var oP=new Person('blue', '男');
var oW=new Worker('blue', '男', '打杂的');

oP.showName();
oP.showSex();

oW.showName();
oW.showSex();
oW.showJob();
</script>
</head>

<body>
</body>
</html>

instanceof运算符
查看对象是否是某个类的实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var arr1=[1,2,3];

alert(arr1 instanceof Object);
</script>
</head>

<body>
</body>
</html>

限制范围的拖拽类
构造函数伪装
属性的继承
原理：欺骗构造函数
call的使用
原型链
方法的继承
原理：复制方法
覆盖原型和方法复制
这里写图片描述
Drag.js:

function Drag(id)
{
    var _this=this;

    this.disX=0;
    this.disY=0;
    this.oDiv=document.getElementById(id);

    this.oDiv.onmousedown=function (ev)
    {
        _this.fnDown(ev);

        return false;
    };
}

Drag.prototype.fnDown=function (ev)
{
    var _this=this;
    var oEvent=ev||event;
    this.disX=oEvent.clientX-this.oDiv.offsetLeft;
    this.disY=oEvent.clientY-this.oDiv.offsetTop;

    document.onmousemove=function (ev)
    {
        _this.fnMove(ev);
    };

    document.onmouseup=function ()
    {
        _this.fnUp();
    };
};

Drag.prototype.fnMove=function (ev)
{
    var oEvent=ev||event;

    this.oDiv.style.left=oEvent.clientX-this.disX+'px';
    this.oDiv.style.top=oEvent.clientY-this.disY+'px';
};

Drag.prototype.fnUp=function ()
{
    document.onmousemove=null;
    document.onmouseup=null;
};

LimitDrag.js:

function LimitDrag(id)
{
    Drag.call(this, id);
}

//LimitDrag.prototype=Drag.prototype;

for(var i in Drag.prototype)
{
    LimitDrag.prototype[i]=Drag.prototype[i];
}

LimitDrag.prototype.fnMove=function (ev)
{
    var oEvent=ev||event;
    var l=oEvent.clientX-this.disX;
    var t=oEvent.clientY-this.disY;

    if(l<0)
    {
        l=0;
    }
    else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
    {
        l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
    }

    if(t<0)
    {
        t=0;
    }
    else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)
    {
        t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
    }

    this.oDiv.style.left=l+'px';
    this.oDiv.style.top=t+'px';
};
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<style>
#p1 {width:100px; height:100px; background:red; position:absolute;}
#p2 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="Drag.js"></script>
<script src="LimitDrag.js"></script>
<script>
window.onload=function ()
{
    new Drag('p1');
    new LimitDrag('p2');
};
</script>
</head>

<body>
<p id="p1">
</p>
<p id="p2">
</p>
</body>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网