JS面向对象实例、高级

·  选项卡用面向过程1

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

	for (var i=0;i

·  选项卡用面向对象写2

var aBtn=null;  //全局变量
var aDiv=null;

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

	for (var i=0;i

·  选项卡用面向对象写3

window.οnlοad=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

·  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.οnmοusedοwn=function (ev)
	{
		var oEvent=ev||event;
		var disX=oEvent.clientX-oDiv.offsetLeft;
		var disY=oEvent.clientY-oDiv.offsetTop;

		document.οnmοusemοve=function (ev)
		{
			var oEvent=ev||event;
			oDiv.style.left=oEvent.clientX-disX+'px';
			oDiv.style.top=oEvent.clientY-disY+'px';
		}
		document.οnmοuseup=function ()
		{
			document.οnmοusemοve=null;
			document.οnmοuseup=null;
		};
	};

·  拖拽面向对象2

window.οnlοad=function ()
{
	new Drag('div1');
};

function Drag(id)
{
	var _this=this;
	this.disX = 0;
	this.disY = 0;
	this.oDiv=document.getElementById(id);
	this.oDiv.οnmοusedοwn=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.οnmοusemοve=function (ev)
	{
		_this.fnMove(ev);
	};
	document.οnmοuseup=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.οnmοusemοve=null;
	document.οnmοuseup=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