JS面向对象实例、高级

·  选项卡用面向过程1

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

for (var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='';
}
this.className='active';
aDiv[this.index].style.display='block';
};
}
};·  选项卡用面向对象写2
var aBtn=null; //全局变量
var aDiv=null;

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

for (var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=fnClick;

}
};

function fnClick()
{
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='';
}
this.className='active';
aDiv[this.index].style.display='block';
};·  选项卡用面向对象写3

window.onload=function ()
{
new TabSwitch('div1');
};

function TabSwitch(id)
{
var _this=this; //这个this指的是div
var oDiv = document.getElementById(id);
this.aDiv = oDiv.getElementsByTagName('div');
this.aBtn = oDiv.getElementsByTagName('input');

for (var i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].ind
4000
ex=i;
this.aBtn[i].onclick=function ()
{
_this.fnClick(this);// 这个this指的是obtn
};
}
};

TabSwitch.prototype.fnClick=function (obtn)
{
for(var i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].className='';
this.aDiv[i].style.display='';
}
obtn.className='active';
this.aDiv[obtn.index].style.display='block';
};·  Json的面向对象1
var json={
a: 1,
b: 2,
c: 'aa',
d: function()
{
alert('bbb');
}
};
json.d();·  Json的面向对象2

var json={
a: 1,
b: 2,
c: 'aa',
show: function()
{
alert(this.a);
}
};
json.show();

·  Json的面向对象3

var json={
name: 'frank',
qq: '123456',
showName:function()
{
alert('我的名字：'+this.name);
},
showQQ:function()
{
alert('我的qq：'+this.qq);
}
};
json.showName();
json.showQQ();

·  命名空间（可以让很多相同名字的函数同时存在）
var zns={};

zns.one={};
zns.two={};
zns.three={};

zns.one.getUser=function()
{
alert('aaa');
};
zns.two.getUser=function()
{
alert('bbb');
};
zns.three.getUser=function()
{
alert('ccc');
};

zns.one.getUser()
zns.two.getUser()
zns.three.getUser()·  继承（属性继承通过call，原型继承通过for 循环）
function A()
{
this.abc=12;
}

A.prototype.show=function ()
{
alert(this.abc);
};

//继承属性
function B()
{
//this->new B()
A.call(this)
};

B.prototype.fn=function ()
{
alert('aaa');
};

//继承方法 要用循环，不然B会影响A
//B.prototype=A.prototype; //前面是把两个原型指向一个方法，修改任意一个另一个都会受到影响
for (var i in A.prototype)
{
B.prototype[i]=A.prototype[i];
}

var objB=new B();
var objA=new A();

//检验属性
alert(objB.abc);

//检验方法
objB.show();

objB.fn();

//正常不弹出，没有这个方法
objA.fn();·  拖拽面向过程1
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
}
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};·  拖拽面向对象2

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

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

Drag.prototype.fnDown=function (ev)
{
var oEvent=ev||event;
var _this=this;

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 oEvent=ev||event;

this.oDiv.style.left=oEvent.clientX-this.disX+'px';
this.oDiv.style.top=oEvent.clientY-this.disY+'px';
};

Drag.prototype.fnUp=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};

·  拖拽继承（正常拖拽与限制范围的拖拽）
function LimitDrag(id)
{
Drag.call(this, id); //继承属性 this和id之间用逗号隔开
};

for(var i in Drag.prototype)
{
LimitDrag.prototype[i]=Drag.prototype[i]; //继承原型
};

LimitDrag.prototype.fnMove=function (ev) //限制范围
{
var oEvent=ev||event;
var l=oEvent.clientX-this.disX;
var t=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';
};


笔记：
JS面向对象实例

·选项卡用面向对象写

1.写出面向过程的代码

2.去掉函数嵌套、把需要的变量变成全局变量

3.把onload改成构造函数，嵌套函数拿出来改成原型，全局变量变成属性，用this

4.了解this指的是哪一个对象。

JS面向对象高级

·json的面向对象

1.不适合多个对象，适合单体对象

2.命名空间，可以让很多相同名字的函数同时存在

·继承

1.属性继承通过call，原型继承通过for 循环

·引用：

1.arr1=arr2，实际是让arr2与arr1都指向一个数组，改变任何一个数组，另一个也会改变

解决办法 ，建立新的数组arr2，在arr1里做循环，把所有的元素都push到arr2中。

·面向对象拖拽的继承

1.去掉函数嵌套、把需要的变量变成全局变量

2.把onload变成构造函数，方法改成原型

3.继承，重写move，变成限制范围的拖拽

·系统对象

宿主对象：JS运行环境（浏览器）

本地对象：需要经过new 才能用

内置对象：不需要经过new