Three major features of object-oriented language: inheritance, encapsulation, polymorphism
<!DOCTYPE HTML><HTML><Head> <title>Extend-opp</title></Head><Scripttype= "Text/javascript"> functionPerson (name,sex) { This. Name=name; This. Sex=sex; } Person.prototype.showName= function() {alert ( This. Name); }; Person.prototype.showSex=function() {alert ( This. Sex); }; varoP1=NewPerson ('Blue','Mans'); //op1.showsex (); functionWorker (name,sex,job) {//constructor masquerading call the parent ' s construtorPerson.call ( This, Name,sex); This. Job=job; } //prototype chain use the prototype to extend the parent ' s function //Worker.prototype=person.prototype; for (varIinchPerson.prototype) {Worker.prototype[i]=Person.prototype[i]; } Worker.prototype.showJob=function() {alert ( This. Job); }; varoW1=NewWorker ('Jack','Mans','Designer'); Ow1.showjob ();</Script><Body></Body></HTML>
Use an instance of object-oriented inheritance:
Index.html
<!DOCTYPE HTML><HTML><Head> <title>Drag Div</title> <styletype= "Text/css">#div1{width:100px;Height:100px;background:Red;position:Absolute;}#div2{width:100px;Height:100px;background:Yellow;position:Absolute;} </style> <Scriptsrc= "Drag.js"></Script> <Scriptsrc= "Limitdrag.js"></Script> <Scripttype= "Text/javascript">window.onload=function(){ NewDrag ('Div1'); NewLimitdrag ('Div2'); } </Script></Head><Body> <DivID= "Div1"></Div> <DivID= "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 (); }; };D rag.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 '; };D rag.prototype.fnup=function () {document.onmousemove=null; Document.onmouseup=null; };
Limitdrag.js
functionLimitdrag (ID) {Drag.call ( This, id);} for(varIinchDrag.prototype) {Limitdrag.prototype[i]=drag.prototype[i];} LimitDrag.prototype.fnMove=function(EV) {varoevent=ev| |event; varl=oevent.clientx- This. Disx; vart=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 Object-Oriented inheritance application