JavaScript中的面向对象编程

1.什么是面向对象

a)什么是对象

对象是一个整体，对外提供一些操作.

b)什么是面向对象

使用对象时，只关注对象提供的功能，不关注其内部细节，比如jQuery

面向对象是一种通用思想，并非只有编程中能用，任何事情都可以用

1. js中的面向对象特点

a) 面向对象编程(oop)

i. 抽象：抓住核心问题

ii. 封装：不考虑内部实现,只考虑功能使用

iii. 继承:从已有对象上，继承出新的对象，多重继承

b) 对象的组成

i. 方法----函数:过程,动态的

ii. 属性----变量:状态、静态的

c) 对象的示例

var arr=[1,2,3,4,5];

var a=12; //变量：自由

arr.a=5; //属性：属于一个对象

function show() //函数

{

alert('a');

}

arr.fn=function () //方法

{

alert('a');

};

2.第一个面向对象的程序

不能在系统对象中随意附加方法、属性，否则会覆盖已有方法、属性

var arr=[12, 65, 87];

//this：当前的方法，属于谁

arr.show=function ()

{

alert(this);//this指向的是arr

};

oDiv.οnclick=function ()

{

alert(this);//this指向的是oDiv

};

3.object对象

var obj=new Object();

obj.name='blue';

obj.sex='男';

obj.showName=function ()

{

alert('我的名字叫：'+this.name);

};

obj.showSex=function ()

{

alert('我是'+this.sex+'的');

};

obj.showName();

obj.showSex();

4.工厂方式

用构造函数创建一个类

<!DOCTYPE html>

<html >

<head>

<title>用工厂方式构造对象</title>

function createPerson(name, sex) //构造函数

{

//1.原料

var obj=newObject();

//2.加工

obj.name=name;

obj.sex=sex;

obj.showName=function()

{

alert('我的名字叫：'+this.name);

};

obj.showSex=function()

{

alert('我是'+this.sex+'的');

};

//3.出厂

return obj;

}

var p1=createPerson('blue', '男');

var p2=createPerson('leo', '女');

alert(p1.showName==p2.showName);

</script>

</head>

<body>

</body>

</html>

工厂方式的问题

l 没有new,函数重复定义，加上new做了两件事

l 创建了一个空白对象，替你返回了这个对象

5.面向对象2

有new的时候

function show()

{

alert(this);

}

show(); //window

new show(); //新创建的对象

6.原型

什么是原型

l 原型是class，修改他可以影响一类元素

l 在已有对象中加入自己的属性、方法

l 原型修改对已有对象的影响

为Array添加sum方法

l 给对象添加方法，类似于行间样式

l 给原型添加方法，类似于class

原型的小缺陷

l 无法限制覆盖

7．原型的优先级

行间样式的优先级高于原型，当删除行间样式的值，则恢复原型的值

<!DOCTYPE html >

<html>

<head>

<title>原型的优先级</title>

Array.prototype.a=12;

var arr=[1,2,3];

alert(arr.a); //12

arr.a=5;

alert(arr.a); //5

delete arr.a;

alert(arr.a); //12

</script>

</head>

<body>

</body>

</html>

8.面向对象的选项卡

a)选项卡原始版

<!DOCTYPE html>

<html>

<head>

<style>

#div1 input {background:#CCC;}

#div1 .active {background:yellow;}

#div1 div {width:200px; height:200px; background:#CCC;display:none;}

</style>

<title>选项卡过程版</title>

window.οnlοad=function ()

{

varoDiv=document.getElementById('div1');

varaBtn=oDiv.getElementsByTagName('input');

varaDiv=oDiv.getElementsByTagName('div');

var i=0;

for(i=0;i<aBtn.length;i++)

{

aBtn[i].index=i;

aBtn[i].οnclick=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';

};

}

};

</script>

</head>

<body>

<inputclass="active" type="button" value="教育" />

<inputtype="button" value="财经" />

<inputtype="button" value="aaa" />

<divstyle="display:block;">首页</div>

</div>

</body>

</html>

b)选项卡的-面向对象版

i. 面向对象版(1)

<!DOCTYPE html >

<html>

<head>

<style>

#div1 input {background:#CCC;}

#div1 .active {background:yellow;}

#div1 div {width:200px; height:200px; background:#CCC;display:none;}

</style>

<title>面向对象版(1)</title>

var aBtn=null;

var aDiv=null;

window.οnlοad=function ()

{

varoDiv=document.getElementById('div1');

aBtn=oDiv.getElementsByTagName('input');

aDiv=oDiv.getElementsByTagName('div');

var i=0;

for(i=0;i<aBtn.length;i++)

{

aBtn[i].index=i;

aBtn[i].οnclick=tab;

}

};

function tab()

{

for(i=0;i<aBtn.length;i++)

{

aBtn[i].className='';

aDiv[i].style.display='none';

}

this.className='active';

aDiv[this.index].style.display='block';

}

</script>

</head>

<body>

<inputclass="active" type="button" value="教育" />

<inputtype="button" value="财经" />

<inputtype="button" value="aaa" />

<divstyle="display:block;">1asdfasdfds</div>

<div>2xzcvxzcv</div>

</div>

</body>

</html>

ii.选项卡面向对象版(2)

<!DOCTYPE html >

<html >

<head>

<style>

#div1 input {background:#CCC;}

#div1 .active {background:yellow;}

#div1 div {width:200px; height:200px; background:#CCC;display:none;}

</style>

window.οnlοad=function ()

{

var oTab=newTabSwitch('div1');

};

function TabSwitch(id)

{

varoDiv=document.getElementById(id);

this.aBtn=oDiv.getElementsByTagName('input');

this.aDiv=oDiv.getElementsByTagName('div');

var i=0;

for(i=0;i<this.aBtn.length;i++)

{

this.aBtn[i].index=i;

this.aBtn[i].οnclick=this.tab;

}

TabSwitch.prototype.tab=function ()

{

for(i=0;i<this.aBtn.length;i++)

{

this.aBtn[i].className='';

this.aDiv[i].style.display='none';

}

this.className='active';

this.aDiv[this.index].style.display='block';

}

</script>

</head>

<body>

<inputclass="active" type="button" value="教育" />

<inputtype="button" value="财经" />

<inputtype="button" value="aaa" />

<divstyle="display:block;">1asdfasdfds</div>

<div>2xzcvxzcv</div>

</div>

</body>

</html>

iii.选项卡-面向对象(3)

<!DOCTYPE html >

<html >

<head>

<style>

#div1 input {background:#CCC;}

#div1 .active {background:yellow;}

#div1 div {width:200px; height:200px; background:#CCC;display:none;}

</style>

window.οnlοad=function ()

{

var oTab=newTabSwitch('div1');

};

function TabSwitch(id)

{

varoDiv=document.getElementById(id);

this.aBtn=oDiv.getElementsByTagName('input');

this.aDiv=oDiv.getElementsByTagName('div');

var i=0;

var _this=this;

for(i=0;i<this.aBtn.length;i++)

{

this.aBtn[i].index=i;

this.aBtn[i].οnclick=function()

{

_this.tab(this);

};

}

TabSwitch.prototype.tab=function (oBtn)

{

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

};

</script>

</head>

<body>

<inputclass="active" type="button" value="教育" />

<inputtype="button" value="财经" />

<inputtype="button" value="aaa" />

<divstyle="display:block;">1asdfasdfds</div>

<div>2xzcvxzcv</div>

</div>

</body>

</html>

9.this实例(1)

<!DOCTYPE html >

<html>

<head>

function Aaa()

{

var _this=this;

this.a=12;

setInterval(function(){

_this.show();

}, 1000);

}

Aaa.prototype.show=function ()

{

alert(this.a);

};

var obj=new Aaa();

//obj.show();

</script>

</head>

<body>

</body>

</html>

this实例(2)

<!DOCTYPE html>

<html >

<head>

<title>this实例2</title>

function Bbb()

{

var _this=this;

this.b=5;

document.getElementById('btn1').οnclick=function()

{

_this.show();

};

}

Bbb.prototype.show=function ()

{

alert(this.b);

};

window.οnlοad=function ()

{

new Bbb();

};

</script>

</head>

<body>

</body>

</html>

10.json方式的面向对象

把方法包在一个Json里

有人管他叫——命名空间

在公司里，把同一类方法，包在一起

1)json方式的面向对象

<!DOCTYPE html>

<html>

<head>

<title>json方式的面相对象</title>

var p1={

name: 'blue',

sex: '男',

showName:function ()

{

alert('我的名字是：'+this.name);

showSex: function()

{

alert('我的性别是'+this.sex+'的');

}

};

p1.showSex();

</script>

</head>

<body>

</body>

</html>

2)命名空间

<!DOCTYPE html >

<html>

<head>

var miaov={};

miaov.common={

getByClass:function ()

{

myAddEvent:function ()

{

}

};

miaov.fx={

startMove:function ()

{

drag: function ()

{

}

};

miaov.common.getByClass()

</script>

</head>

<body>

</body>

</html>

11.拖拽

I．拖拽的原始版

<!DOCTYPE html >

<html>

<head>

<style>

#div1 {width:100px; height:100px; background:red;position:absolute;}

</style>

<title>无标题文档</title>

var oDiv=null;

var disX=0;

var disY=0;

window.οnlοad=function ()

{

oDiv=document.getElementById('div1');

oDiv.οnmοusedοwn=fnDown;

};

function fnDown(ev)

{

varoEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

disY=oEvent.clientY-oDiv.offsetTop;

document.οnmοusemοve=fnMove;

document.οnmοuseup=fnUp;

}

function fnMove(ev)

{

var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';

oDiv.style.top=oEvent.clientY-disY+'px';

}

function fnUp()

{

document.οnmοusemοve=null;

document.οnmοuseup=null;

}

</script>

</head>

<body>

</div>

</body>

</html>

ii.拖拽面向对象版

<!DOCTYPE>

<html>

<head>

<style>

#div1 {width:100px; height:100px; background:red;position:absolute;}

#div2 {width:100px; height:100px; background:yellow;position:absolute;}

</style>

<title>拖拽的原型版</title>

window.οnlοad=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.οnmοusedοwn=function()

{

_this.fnDown();

};

}

Drag.prototype.fnDown=function (ev)

{

var _this=this;

varoEvent=ev||event;

this.disX=oEvent.clientX-this.oDiv.offsetLeft;

this.disY=oEvent.clientY-this.oDiv.offsetTop;

document.οnmοusemοve=function()

{

_this.fnMove();

};

document.οnmοuseup=function()

{

_this.fnUp();

};

Drag.prototype.fnMove=function (ev)

{

varoEvent=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;

};

</script>

</head>

<body>

</div>

asdf

</div>

</body>

</html>

iii.拖拽-继承

ü 限制范围的拖拽类

ü 构造函数伪装

ü 属性的继承

ü 原理：欺骗构造函数

call的使用

ü 原型链

ü 方法的继承

ü 原理：复制方法

ü 覆盖原型和方法复制

<!DOCTYPE html>

<html>

<head>

<style>

#div1 {width:100px; height:100px; background:red;position:absolute;}

#div2 {width:100px; height:100px; background:yellow;position:absolute;}

</style>

<title>限制范围的拖拽</title>

<scriptsrc="LimitDrag.js"></script>

window.οnlοad=function ()

{

new Drag('div1');

newLimitDrag('div2');

};

</script>

</head>

<body>

</div>

</div>

</body>

</html>

Drag.js

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 _this=this;

var oEvent=ev||event;

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)

{

varoEvent=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;

};

LimitDrag.js

function LimitDrag(id)

{

Drag.call(this,id);

}

//LimitDrag.prototype=Drag.prototype;

for(var i in Drag.prototype)

{

LimitDrag.prototype[i]=Drag.prototype[i];

}

LimitDrag.prototype.fnMove=function (ev)

{

varoEvent=ev||event;

varl=oEvent.clientX-this.disX;

vart=oEvent.clientY-this.disY;

if(l<0)

{

l=0;

}

elseif(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)

{

l=document.documentElement.clientWidth-this.oDiv.offsetWidth;

}

if(t<0)

{

t=0;

}

elseif(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';

};

12.PHP中的类和继承

<?php

class Person

{

function__construct($name, $sex)

{

$this->name=$name;

$this->sex=$sex;

}

functionshowName()

{

echo$this->name;

}

function sex()

{

echo$this->sex;

}

$p1=new Person('blue', '男');

$p1->showName();

<?php

class Person

{

function__construct($name, $sex)

{

$this->name=$name;

$this->sex=$sex;

}

functionshowName()

{

echo$this->name;

}

functionshowSex()

{

echo$this->sex;

}

class Worker extends Person

{

function__construct($name, $sex, $job)

{

parent::__construct($name,$sex);

$this->job=$job;

}

functionshowJob()

{

echo$this->job;

}

$w1=new Worker('blue', '男', '打杂的');

$w1->showName();

$w1->showJob();

13.Js中继承

<!DOCTYPE html>

<html>

<head>

<title>js中的继承</title>

function Person(name, sex)

{

this.name=name;

this.sex=sex;

}

Person.prototype.showName=function ()

{

alert(this.name);

};

Person.prototype.showSex=function ()

{

alert(this.sex);

};

function Worker(name, sex, job)

{

//this->new出来的Worker对象

//构造函数伪装调用父级的构造函数——为了继承属性

Person.call(this,name, sex);

this.job=job;

}

//通过原型来继承父级的方法

Worker.prototype=Person.prototype;

Worker.prototype.showJob=function ()

{

alert(this.job);

};

var oW1=new Worker('blue', '男', '打杂的');

oW1.showJob();

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html >

<html>

<head>

function Person(name, sex)

{

this.name=name;

this.sex=sex;

}

Person.prototype.showName=function ()

{

alert(this.name);

};

Person.prototype.showSex=function ()

{

alert(this.sex);

};

//-------------------------------------

function Worker(name, sex, job)

{

//this->new出来的Worker对象

//构造函数伪装调用父级的构造函数——为了继承属性

Person.call(this,name, sex);

this.job=job;

}

//原型链通过原型来继承父级的方法

//Worker.prototype=Person.prototype;

for(var i in Person.prototype)

{

Worker.prototype[i]=Person.prototype[i];

}

Worker.prototype.showJob=function ()

{

alert(this.job);

};

var oP=new Person('blue', '男');

var oW=new Worker('blue', '男', '打杂的');

oP.showName();

oP.showSex();

oW.showName();

oW.showSex();

oW.showJob();

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html >

<head>

var arr1=[1,2,3];

var arr2=[];

for(var i in arr1)

{

arr2[i]=arr1[i];

}

arr2.push(4);

alert('1:'+arr1); //1:1,2,3

alert('2:'+arr2); //2:1,2,3,4

</script>

</head>

<body>

</body>

</html>

14.系统对象

本地对象（非静态对象）

什么是本地对象

常用对象

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error

内置对象（静态对象）

什么是本地对象

Global、Math

宿主对象（由浏览器提供的对象）

DOM、BOM

JavaScript中的面向对象编程

1.什么是面向对象

2.第一个面向对象的程序

3.object对象

4.工厂方式

5.面向对象2

6.原型

7．原型的优先级

8.面向对象的选项卡

9.this实例(1)

10.json方式的面向对象

11.拖拽

12.PHP中的类和继承

13.Js中继承

14.系统对象

继续阅读

如果你的梦想是成为一名程序员，那可能需要看看这篇文章！

不支持尝试执行的操作

Python程序可打印今天的年，月和日

2010年终总结--技术篇

写在工作13周年

编程高手：VC 6.0下利用消息实现内部进程通讯

VS2008 不在支持 Attributed ATL

C++之父Bjarne Stroustrup的演讲：软件理想和历史

对象的内存结构及占用空间的计算方法

linux网络编程----发送与接收文件

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序

各种二分查找

JAVA高效编程指南

JQuery--dom捕获html元素

jquery_126_demo