js基础之面向对象

一、基本概念

Array类　　　　————>　　不具备实际的功能，只能用来构造对象

arr对象　　　　 ————>　　有实际的功能，被类给构造出来

如：var arr=new Array();

prototype原型  ————>　　可以扩展系统或自建对象的功能，添加一些本不支持或没有的方法和属性，就类似于class，可以影响一类元素

 function CreatePerson(name,sex){//构造函数
     //系统内部工作流程
     //var this=new Object();

     this.name=name;
     this.sex=sex;

     //系统内部工作流程
     //return this;
 }
 CreatePerson.prototype.show=function(){
     alert(this.name+'/'+this.sex);alert(typeof Date);
 }
 p1=new CreatePerson('blue','man');p1.show();
 var arr1=new Array(12,5,8,3);
 var arr2=new Array(112,33,9,15);

 Array.prototype.sum=function(){
     var result=0;
     var i=0;

     for(i=0;i<this.length;i++){
         result+=this[i];
     }
     return result;
 }
 //alert(arr2.sum());
 String.prototype.trim=function(){
     return this.replace(/^\s+|\s+$/g,'');
 };
 var str='   fsf ew  op   ';
 //alert(str.length+'--'+str.trim().length);

原型的优先级：

给原型添加方法或属性，类似于class；给对象添加方法或属性，类似于行间样式；而行间样式优先级>class

 Array.prototype.a=12;
 var arr=[1,3,5];alert(arr.a);    //

 arr.a=2;alert(arr.a);    //

 delete arr.a;alert(arr.a);    //

二、把面向过程改写成面向对象的形式

1前提：所有东西都在window.onload里面

2.把onload　　改成　　构造函数　　注意应该用大驼峰规则命名

全局变量　　 改成　　属性　　栗子：vardisX=0　　改成　　this.disX=0;

函数　　　　 改成　　方法　　栗子：function fnDown(){}　　改成　　Drag.prototype.fnDown=function(ev){};

最后把有事件和定时器的this再套一层函数

栗子一：

改写前

 window.onload=function ()
 {
     var oDiv=document.getElementById('div1');
     var aBtn=oDiv.getElementsByTagName('input');
     var aDiv=oDiv.getElementsByTagName('div');
     var i=0;

     for(i=0;i<aBtn.length;i++)
     {
         aBtn[i].index=i;
         aBtn[i].onclick=function ()
         {
             for(i=0;i<aBtn.length;i++)
             {
                 aBtn[i].className='';
                 aDiv[i].style.display='none';
             }
             this.className='active';
             aDiv[this.index].style.display='block';
         };
     }
 };

改写后

 window.onload=function(){
     var oTab=new TabSwitch('div1');
 };
 function TabSwitch(id){console.log(this);//this指向oTab
     var oDiv=document.getElementById(id);
     this.aBtn=oDiv.getElementsByTagName('input');
     this.aDiv=oDiv.getElementsByTagName('div');
     var _this=this;
     var i=0;

     for(i=0;i<this.aBtn.length;i++)
     {
         this.aBtn[i].index=i;
         this.aBtn[i].onclick=function(){
             _this.tab(this);console.log(this);//this指向aBtn[i]
         }
     }
 }
 TabSwitch.prototype.tab=function (oBtn){console.log(this);//this指向oTab
             for(i=0;i<this.aBtn.length;i++)
             {
                 this.aBtn[i].className='';
                 this.aDiv[i].style.display='none';
             }
             oBtn.className='active';
             this.aDiv[oBtn.index].style.display='block';
         };

3.改错:

this啥时候出问题？　　1.定时器　　2.事件

1.再套一层函数

 function Al(){
     var _this=this;
     this.a=12;//alert(this);

     setInterval(function(){
         _this.show();//console.log(_this);//_this指向Al，this指向window
     },100);
 }
 Al.prototype.show=function(){
     console.log(this.a);
 }
 var obj=new Al();

2.同上

三、面向对象的拖拽

 window.onload=function(){
     new Drag('div1');
     new Drag('div2');
 }
 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 _this=this;
     var oEvent=ev||event;
     
　　　　oEvent.preventDefault();
     this.oDiv.style.left=oEvent.clientX-this.disX+'px';
     this.oDiv.style.top=oEvent.clientY-this.disY+'px';//console.log(oEvent.clientX+'--'+disX);
 };
 Drag.prototype.fnUp=function(){
     document.onmousemove=null;
     document.onmouseup=null;
 };

四、对象的继承

 function Person(name,sex){
     this.name=name;
     this.sex=sex;
 }
 Person.prototype.showName=function(){
     alert(this.name);
 }
 function Worker(name,sex,job){
     //构造函数伪装    ——>调用父级的构造函数，为了继承属性
     Person.call(this,name,sex);//console.log(this);this指向new出来的Worker对象，然后传给Person，Person把它当作自己的孩子（其实不是亲生的）赋予属性
     this.job=job;
 }
 //原型链——>通过原型继承父级的方法
 //Worker.prototype=Person.prototype;//这种方式会把子类的方法添加到父类console.log(Person.prototype.showJob);
 //把父级的所有方法复制到子类，再设置子类方法就不会影响到父级
 for(var i in Person.prototype){console.log(i);
     Worker.prototype[i]=Person.prototype[i];
 }
 Worker.prototype.showJob=function(){
     alert(this.job);
 }
 var oWk=new Worker('lee','man','boss');
 oWk.showName();
 oWk.showJob();

五、封装继承的拖拽框架

先引入父框架Drag.js

<script type="text/javascript" src="../js/Drag.js"></script>

 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;//解决ff、chrome二次拖拽的bug
     };
 };
 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 _this=this;
     var oEvent=ev||event;
     
　　　　oEvent.preventDefault();
     this.oDiv.style.left=oEvent.clientX-this.disX+'px';
     this.oDiv.style.top=oEvent.clientY-this.disY+'px';//console.log(oEvent.clientX+'--'+disX);
 };
 Drag.prototype.fnUp=function(){
     document.onmousemove=null;
     document.onmouseup=null;
 };

引入子框架LimitDrag.js

<script type="text/javascript" src="../js/LimitDrag.js"></script>

让子框架LimitDrag.js继承父框架

 // JavaScript Document
 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 _this=this;
     var oEvent=ev||event;
　　　　oEvent.preventDefault();
     var l=oEvent.clientX-this.disX;
     var t=oEvent.clientY-this.disY;console.log(l+'--'+t);

     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';//console.log(oEvent.clientX+'--'+disX);
 };

然后就可以为不同的div使用不同的框架

 window.onload=function(){
     new Drag('div1');
     new LimitDrag('div2');
 }