欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-29 20:47:57
JavaScript开发面向对象教程之继承。 面向对象的拖拽 改写原有拖拽

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

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的使用
原型链
方法的继承
原理：复制方法
覆盖原型和方法复制
JavaScript开发面向对象教程之继承
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>

上一篇： 关于Web前端密码加密是否有意义的分析讲解

下一篇： gulp给文件打上md5 -hash码 防止缓存（代码教程）

推荐阅读