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);    //12

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

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再套一层函数

栗子一：

改写前

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');
}