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