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