面向对象语言的三大特征：继承、封装、多态
<!DOCTYPE html>
<html>
<head>
<title>Extend-OPP</title>
</head>
<script type="text/javascript">
function Person(name,sex){
this.name=name;
this.sex=sex;
}
Person.prototype.showName = function() {
alert(this.name);
};
Person.prototype.showSex=function(){
alert(this.sex);
};
var oP1=new Person(‘blue‘,‘man‘);
// oP1.showSex();
function Worker(name,sex,job){
//构造函数伪装 Call the parent‘s construtor
Person.call(this,name,sex);
this.job=job;
}
// 原型链 Use the prototype to extend the parent‘s function
//Worker.prototype=Person.prototype;
for (var i in Person.prototype){
Worker.prototype[i]=Person.prototype[i];
}
Worker.prototype.showJob=function(){
alert(this.job);
};
var oW1=new Worker(‘Jack‘,‘man‘,‘Designer‘);
oW1.showJob();
</script>
<body>
</body>
</html>
使用面向对象继承的实例：
index.html
<!DOCTYPE html>
<html>
<head>
<title>drag Div</title>
<style type="text/css">
#div1{width: 100px;height: 100px;background: red;position: absolute;}
#div2{width: 100px;height: 100px;background: yellow;position: absolute;}
</style>
<script src="drag.js"></script>
<script src="Limitdrag.js"></script>
<script type="text/javascript">
window.onload=function(){
new Drag(‘div1‘);
new LimitDrag(‘div2‘);
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
darg.js
function Drag(id){
var _this=this;
this.disX=0;
this.dixY=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‘;
// this.oDiv.style.left=l+‘px‘;
// this.oDiv.style.top=t+‘px‘;
};
Drag.prototype.fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
};
Limitdrag.js
function LimitDrag(id){
Drag.call(this,id);
}
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‘;
};
原文地址：https://www.cnblogs.com/cheryshi/p/8494623.html
时间： 2024-11-05 11:57:20