JavaScript面向對象的繼承應用
阿新 • • 發佈：2018-03-02
for .html mouseup top off element window blue dex
面向對象語言的三大特征：繼承、封裝、多態
<!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‘; };
JavaScript面向對象的繼承應用