js基础之面向对象

一、基本概念

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

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

如：var arr=new Array();

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

 1 function CreatePerson(name,sex){//构造函数
 2     //系统内部工作流程
 3     //var this=new Object();
 4     
 5     this.name=name;
 6     this.sex=sex;
 7     
 8     //系统内部工作流程
 9     //return this;
10 }
11 CreatePerson.prototype.show=function(){
12     alert(this.name+'/'+this.sex);alert(typeof Date);
13 }
14 p1=new CreatePerson('blue','man');p1.show();
15 var arr1=new Array(12,5,8,3);
16 var arr2=new Array(112,33,9,15);
17 
18 Array.prototype.sum=function(){
19     var result=0;
20     var i=0;
21     
22     for(i=0;i<this.length;i++){
23         result+=this[i];
24     }
25     return result;
26 }
27 //alert(arr2.sum());
28 String.prototype.trim=function(){
29     return this.replace(/^\s+|\s+$/g,'');
30 };
31 var str='   fsf ew  op   ';
32 //alert(str.length+'--'+str.trim().length);

原型的优先级：

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

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

 

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

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

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

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

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

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

栗子一：

改写前

 1 window.onload=function ()
 2 {
 3     var oDiv=document.getElementById('div1');
 4     var aBtn=oDiv.getElementsByTagName('input');
 5     var aDiv=oDiv.getElementsByTagName('div');
 6     var i=0;
 7     
 8     for(i=0;i<aBtn.length;i++)
 9     {
10         aBtn[i].index=i;
11         aBtn[i].onclick=function ()
12         {
13             for(i=0;i<aBtn.length;i++)
14             {
15                 aBtn[i].className='';
16                 aDiv[i].style.display='none';
17             }
18             this.className='active';
19             aDiv[this.index].style.display='block';
20         };
21     }
22 };

 

改写后

 1 window.onload=function(){
 2     var oTab=new TabSwitch('div1');
 3 };
 4 function TabSwitch(id){console.log(this);//this指向oTab
 5     var oDiv=document.getElementById(id);
 6     this.aBtn=oDiv.getElementsByTagName('input');
 7     this.aDiv=oDiv.getElementsByTagName('div');
 8     var _this=this;
 9     var i=0;
10     
11     for(i=0;i<this.aBtn.length;i++)
12     {
13         this.aBtn[i].index=i;
14         this.aBtn[i].onclick=function(){
15             _this.tab(this);console.log(this);//this指向aBtn[i]
16         }
17     }
18 }
19 TabSwitch.prototype.tab=function (oBtn){console.log(this);//this指向oTab
20             for(i=0;i<this.aBtn.length;i++)
21             {
22                 this.aBtn[i].className='';
23                 this.aDiv[i].style.display='none';
24             }
25             oBtn.className='active';
26             this.aDiv[oBtn.index].style.display='block';
27         };

 

3.改错:

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

 1.再套一层函数

 1 function Al(){
 2     var _this=this;
 3     this.a=12;//alert(this);
 4     
 5     setInterval(function(){
 6         _this.show();//console.log(_this);//_this指向Al，this指向window
 7     },100);
 8 }
 9 Al.prototype.show=function(){
10     console.log(this.a);
11 }
12 var obj=new Al();

2.同上

 三、面向对象的拖拽

 1 window.onload=function(){
 2     new Drag('div1');
 3     new Drag('div2');
 4 }
 5 function Drag(id){
 6     var _this=this;
 7     this.disX=0;
 8     this.disY=0;
 9     
10     this.oDiv=document.getElementById(id);
11     
12     this.oDiv.onmousedown=function(){
13         _this.fnDown();
14     };
15 };
16 Drag.prototype.fnDown=function(ev){
17     var _this=this;
18     var oEvent=ev||event;
19     this.disX=oEvent.clientX-this.oDiv.offsetLeft;
20     this.disY=oEvent.clientY-this.oDiv.offsetTop;
21     
22     document.onmousemove=function(){
23         _this.fnMove();
24     };
25     document.onmouseup=function(){
26         _this.fnUp();
27     };
28 };
29 Drag.prototype.fnMove=function(ev){
30     var _this=this;
31     var oEvent=ev||event;
32     
　　　　oEvent.preventDefault();
33     this.oDiv.style.left=oEvent.clientX-this.disX+'px';
34     this.oDiv.style.top=oEvent.clientY-this.disY+'px';//console.log(oEvent.clientX+'--'+disX);
35 };
36 Drag.prototype.fnUp=function(){
37     document.onmousemove=null;
38     document.onmouseup=null;
39 };

四、对象的继承

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

 五、封装继承的拖拽框架

先引入父框架Drag.js

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

 

 1 function Drag(id){
 2     var _this=this;
 3     this.disX=0;
 4     this.disY=0;
 5     
 6     this.oDiv=document.getElementById(id);
 7     
 8     this.oDiv.onmousedown=function(ev){
 9         _this.fnDown(ev);
10         return false;//解决ff、chrome二次拖拽的bug
11     };
12 };
13 Drag.prototype.fnDown=function(ev){
14     var _this=this;
15     var oEvent=ev||event;
16     this.disX=oEvent.clientX-this.oDiv.offsetLeft;
17     this.disY=oEvent.clientY-this.oDiv.offsetTop;
18     
19     document.onmousemove=function(ev){
20         _this.fnMove(ev);
21     };
22     document.onmouseup=function(){
23         _this.fnUp();
24     };
25 };
26 Drag.prototype.fnMove=function(ev){
27     var _this=this;
28     var oEvent=ev||event;
29     
　　　　oEvent.preventDefault();
30     this.oDiv.style.left=oEvent.clientX-this.disX+'px';
31     this.oDiv.style.top=oEvent.clientY-this.disY+'px';//console.log(oEvent.clientX+'--'+disX);
32 };
33 Drag.prototype.fnUp=function(){
34     document.onmousemove=null;
35     document.onmouseup=null;
36 };

 

 

 

引入子框架LimitDrag.js

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

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

 1 // JavaScript Document
 2 function LimitDrag(id){
 3     Drag.call(this,id);
 4 }
 5 
 6 for(var i in Drag.prototype){
 7     LimitDrag.prototype[i]=Drag.prototype[i];
 8 }
 9 
10 LimitDrag.prototype.fnMove=function(ev){
11     var _this=this;
12     var oEvent=ev||event;
　　　　oEvent.preventDefault();
13     var l=oEvent.clientX-this.disX;
14     var t=oEvent.clientY-this.disY;console.log(l+'--'+t);
15     
16     if(l<0){
17         l=0;
18     }else if(l>=document.documentElement.clientWidth-this.oDiv.offsetWidth){
19         l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
20     }
21     
22     if(t<0){
23         t=0;
24     }else if(t>=document.documentElement.clientHeight-this.oDiv.offsetHeight){
25         t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
26     }
27     
28     this.oDiv.style.left=l+'px';
29     this.oDiv.style.top=t+'px';//console.log(oEvent.clientX+'--'+disX);
30 };

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

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

 

 

posted on 2013-12-25 12:26  狂流  阅读(289)  评论(0)  编辑  收藏  举报