風(fēng)舞煙：中國科技大學(xué)計算機(jī)專業(yè)，微軟認(rèn)證解決方案專家放坏，10多年軟件行業(yè)從業(yè)經(jīng)驗堂鲤，參與過數(shù)百萬的企業(yè)級ERP系統(tǒng)以及銀行系統(tǒng)項目設(shè)計亿傅，在大數(shù)據(jù)處理、富客戶端技術(shù)瘟栖、項目管理等方面有著深刻的理解和實戰(zhàn)經(jīng)驗葵擎，先后擔(dān)任過國內(nèi)某知名企業(yè)的CTO以及國內(nèi)知名IT高端培訓(xùn)機(jī)構(gòu)教學(xué)總監(jiān)，某知名在線網(wǎng)站資深簽約金牌講師半哟，主編過BF-TECH系列的 .NET酬滤、J2EE、 Android等品牌就業(yè)課程寓涨，共達(dá)2000多課時盯串，課程總時長超10萬分鐘，可謂IT在線視頻教育第一人戒良，現(xiàn)任某知名在線網(wǎng)站產(chǎn)品研發(fā)總監(jiān)体捏，對軟件系統(tǒng)架構(gòu)、企業(yè)解決方案糯崎，前端H5移動開發(fā)及IT在線教育行業(yè)有著卓越的見解和遠(yuǎn)識几缭。
一、JS OOP面向?qū)ο缶幊袒A(chǔ)入門
第一部分拇颅、視頻教程
視頻播放地址：
01.跟風(fēng)舞煙學(xué)JS OOP(1)_用定義函數(shù)的方式定義類
02.跟風(fēng)舞煙學(xué)JS OOP(2)_使用new操作符獲得類的實例
03.跟風(fēng)舞煙學(xué)JS OOP(3)_動態(tài)添加修改JS對象屬性和方法
04.跟風(fēng)舞煙學(xué)JS OOP(4)_使用方括號引用對象的屬性和方法
05.跟風(fēng)舞煙學(xué)JS OOP(5)_使用大括號語法創(chuàng)建無類型對象
06.跟風(fēng)舞煙學(xué)JS OOP(6)_prototype原型對象
全部教程涉及代碼下載：
第二部分奏司、文字教程
1.1、用定義函數(shù)的方式定義類
在面向?qū)ο蟮乃枷胫姓敛澹詈诵牡母拍钪痪褪穷愒涎蟆Ｒ粋€類表示了具有相似性質(zhì)的一類事物的抽象，通過實例化一個類黄锤，可以獲得屬于該類的一個實例搪缨，即對象。
在JavaScript中定義一個類的方法如下：
function class1(){
//類成員的定義及構(gòu)造函數(shù)
}
這里class1既是一個函數(shù)也是一個類鸵熟「北啵可以將它理解為類的構(gòu)造函數(shù)，負(fù)責(zé)初始化工作流强。
1.2痹届、使用new操作符獲得一個類的實例
在前面介紹基本對象時呻待，已經(jīng)用過new操作符，例如：new Date();
表示創(chuàng)建一個日期對象队腐，而Date就是表示日期的類蚕捉，只是這個類是由JavaScript內(nèi)部提供的，而不是由用戶定義的柴淘。
new操作符不僅對內(nèi)部類有效迫淹，對用戶定義的類也同樣有效，對于上節(jié)定義的class1为严，也可以用new來獲取一個實例：
function class1(){
//類成員的定義及構(gòu)造函數(shù)
}
var obj1=new class1();
拋開類的概念敛熬，從代碼的形式上來看，class1就是一個函數(shù)第股，那么是不是所有的函數(shù)都可以用new來操作呢应民？是的，在JavaScript中炸茧，函數(shù)和類就是一個概念瑞妇，當(dāng)對一個函數(shù)進(jìn)行new操作時，就會返回一個對象梭冠。如果這個函數(shù)中沒有初始化類成員辕狰，那就會返回一個空的對象。例如：
//定義一個hello函數(shù)
function hello(){
alert("hello");
}
//通過new一個函數(shù)獲得一個對象
var obj=new hello();
alert(typeof(obj));
從運行結(jié)果看控漠，執(zhí)行了hello函數(shù)蔓倍，同時obj也獲得了一個對象的引用。當(dāng)new一個函數(shù)時盐捷，這個函數(shù)就是所代表類的構(gòu)造函數(shù)偶翅，其中的代碼被看作為了初始化一個對象。用于表示類的函數(shù)也稱為構(gòu)造器碉渡。
1.3聚谁、使用方括號（[ ]）引用對象的屬性和方法
在JavaScript中，每個對象可以看作是多個屬性（方法）的集合滞诺，引用一個屬性（方法）很簡單形导，如：
對象名.屬性（方法）名
還可以用方括號的形式來引用：
對象名["屬性（方法）名"]
注意，這里的方法名和屬性名是一個字符串习霹，不是原先點（?）號后面的標(biāo)識符朵耕，例如：
var arr=new Array();
//為數(shù)組添加一個元素
arr["push"]("abc");
//獲得數(shù)組的長度
var len=arr["length"];
//輸出數(shù)組的長度
alert(len);
圖6.1顯示了執(zhí)行的結(jié)果。
由此可見淋叶，上面的代碼等價于：
var arr=new Array();
//為數(shù)組添加一個元素
arr.push("abc");
//獲得數(shù)組的長度
var len=arr.length;
//輸出數(shù)組的長度
alert(len);
這種引用屬性（方法）的方式和數(shù)組類似阎曹，體現(xiàn)了JavaScript對象就是一組屬性（方法）的集合這個性質(zhì)。
這種用法適合不確定具體要引用哪個屬性（方法）的情況，例如：一個對象用于表示用戶資料处嫌，用一個字符串表示要使用的那個屬性栅贴，就可以用這種方式來引用：
//定義了一個User類，包括兩個成員age和sex锰霜，并指定了初始值筹误。
function User(){
this.age=21;
this.sex="male";
}
//創(chuàng)建user對象
var user=new User();
//根據(jù)下拉列表框顯示用戶的信息
function show(slt){
if(slt.selectedIndex!=0){
alert(user[slt.value]);
}
}
//-->
在這段代碼中，使用一個下拉列表框讓用戶選擇查看哪個信息癣缅，每個選項的value就表示用戶對象的屬性名稱。這時如果不采用方括號的形式哄酝，可使用如下代碼來實現(xiàn)：
function show(slt){
if(slt.selectedIndex!=0){
if(slt.value=="age")alert(user.age);
if(slt.value=="sex")alert(user.sex);
}
}
而使用方括號語法友存，則只需寫為：
alert(user[slt.value]);
方括號語法像一種參數(shù)語法，可用一個變量來表示引用對象的哪個屬性陶衅。如果不采用這種方法屡立，又不想用條件判斷，可以使用eval函數(shù)：
alert(eval("user."+slt.value));
這里利用eval函數(shù)的性質(zhì)搀军，執(zhí)行了一段動態(tài)生成的代碼膨俐，并返回了結(jié)果。
實際上罩句，在前面講述document的集合對象時焚刺，就有類似方括號的用法，比如引用頁面中一個名為“theForm”的表單對象门烂，以前的用法是：
document.forms["theForm"];
也可以改寫為：
document.forms.theForm;
forms對象是一個內(nèi)部對象乳愉，和自定義對象不同的是，它還可以用索引來引用其中的一個屬性屯远。
1.4蔓姚、動態(tài)添加、修改慨丐、刪除對象的屬性和方法
上一節(jié)介紹了如何引用一個對象的屬性和方法坡脐，現(xiàn)在介紹如何為一個對象添加、修改或者刪除屬性和方法房揭。其他語言中备闲，對象一旦生成，就不可更改崩溪，要為一個對象添加浅役、修改成員必須要在對應(yīng)的類中修改，并重新實例化伶唯，程序也必須重新編譯觉既。JavaScript提供了靈活的機(jī)制來修改對象的行為，可以動態(tài)添加、修改瞪讼、刪除屬性和方法钧椰。例如：先用類Object來創(chuàng)建一個空對象user：
var user=new Object();
1．添加屬性
這時user對象沒有任何屬性和方法，可以為它動態(tài)的添加屬性符欠，例如：
user.name="jack";
user.age=21;
user.sex="male";
通過上述語句嫡霞，user對象具有了三個屬性：name、age和sex希柿。下面輸出這三個語句：
alert(user.name);
alert(user.age);
alert(user.sex);
由代碼運行效果可知诊沪，三個屬性已經(jīng)完全屬于user對象了。
2．添加方法
添加方法的過程和添加屬性類似：
user.alert=function(){
alert("my name is:"+this.name);
}
這就為user對象添加了一個方法“alert”曾撤，通過執(zhí)行它端姚，彈出一個對話框顯示自己的名字：
user.alert();
圖6.2顯示了執(zhí)行的結(jié)果。
3．修改屬性和方法
修改一個屬性和方法的過程就是用新的屬性替換舊的屬性挤悉，例如：
user.name="tom";
user.alert=function(){
alert("hello,"+this.name);
}
這樣就修改了user對象name屬性的值和alert方法渐裸，它從顯示“my name is”對話框變?yōu)榱孙@示“hello”對話框。
4．刪除屬性和方法
刪除一個屬性和方法的過程也很簡單装悲，就是將其置為undefined：
user.name=undefined;
user.alert=undefined;
這樣就刪除了name屬性和alert方法昏鹃。
在添加、修改或者刪除屬性時诀诊，和引用屬性相同洞渤，也可以采用方括號（[]）語法：
user["name"]="tom";
使用這種方式還有一個特點，可以使用非標(biāo)識符字符串作為屬性名稱畏梆，例如標(biāo)識符中不允許以數(shù)字開頭或者出現(xiàn)空格您宪，但在方括號（[]）語法中卻可以使用：
user["my name"]="tom";
需要注意，在使用這種非標(biāo)識符作為名稱的屬性時奠涌，仍然要用方括號語法來引用：
alert(user["my name"]);
而不能寫為：
alert(user.my name);
事實上宪巨，JavaScript中的每個對象都是動態(tài)可變的，這給編程帶來了靈活性溜畅，也和其他語言產(chǎn)生了區(qū)別捏卓。
1.5、使用大括號（{ }）語法創(chuàng)建無類型對象
傳統(tǒng)的面向?qū)ο笳Z言中慈格，每個對象都會對應(yīng)到一個類怠晴。上一節(jié)講this指針時提到，JavaScript中的對象其實就是屬性（方法）的一個集合浴捆，并沒有嚴(yán)格意義上類的概念蒜田。所以它提供了一種簡單的方式來創(chuàng)建對象，即大括號（{}）語法：
{
property1:statement,
property2:statement2,
…,
propertyN:statmentN
}
通過大括號括住多個屬性或方法及其定義（這些屬性或方法用逗號隔開）选泻，來實現(xiàn)對象的定義冲粤，這段代碼就直接定義個了具有n個屬性或方法的對象美莫，其中屬性名和其定義之間用冒號（:）隔開。例如：
var obj={};//定義了一個空對象
var user={
name:"jack",//定義了name屬性梯捕，初始化為jack
favoriteColor:["red","green","black","white"],//定義了顏色喜好數(shù)組
hello:function(){//定義了方法hello
alert("hello,"+this.name);
},
sex:"male"http://定義了性別屬性sex厢呵，初始化為male
}
//調(diào)用user對象的方法hello
user.hello();
//-->
第一行定義了一個無類型對象obj，它等價于：
var obj=new Object();
接著定義了一個對象user及其屬性和方法傀顾。注意襟铭，除了最后一個屬性（方法）定義，其他的必須以逗號（,）結(jié)尾短曾。其實寒砖，使用動態(tài)增減屬性的方法也可以定義一個完全相同的user對象，讀者可使用前面介紹的方法實現(xiàn)嫉拐。
使用這種方式來定義對象入撒，還可以使用字符串作為屬性（方法）名，例如：
var obj={"001":"abc"}
這就給對象obj定義了一個屬性“001”椭岩，這并不是一個有效的標(biāo)識符，所以要引用這個屬性必須使用方括號語法：
obj["001"];
由此可見璃赡，無類型對象提供了一種創(chuàng)建對象的簡便方式判哥，它以緊湊和清晰的語法將一個對象體現(xiàn)為一個完整的實體。而且也有利于減少代碼的體積碉考，這對JavaScript代碼來說尤其重要塌计，減少體積意味著提高了訪問速度。
1.6侯谁、prototype原型對象
prototype對象是實現(xiàn)面向?qū)ο蟮囊粋€重要機(jī)制锌仅。每個函數(shù)（function）其實也是一個對象，它們對應(yīng)的類是“Function”墙贱，但它們身份特殊热芹，每個函數(shù)對象都具有一個子對象prototype。即prototype表示了該函數(shù)的原型惨撇，而函數(shù)也是類伊脓，prototype就是表示了一個類的成員的集合。當(dāng)通過new來獲取一個類的對象時魁衙，prototype對象的成員都會成為實例化對象的成員报腔。
既然prototype是一個對象，可以使用前面兩節(jié)介紹的方法對其進(jìn)行動態(tài)的修改剖淀，這里先給出一個簡單的例子：
//定義了一個空類
function class1(){
//empty
}
//對類的prototype對象進(jìn)行修改纯蛾，增加方法method
class1.prototype.method=function(){
alert("it's a test method");
}
//創(chuàng)建類class1的實例
var obj1=new class1();
//調(diào)用obj1的方法method
obj1.method();
圖6.3顯示了執(zhí)行的結(jié)果。
