看了很多介紹javascript面向?qū)ο蠹夹g(shù)的文章,很暈.為什么?不是因?yàn)閷懙貌缓?而是因?yàn)樘願(yuàn)W.javascript中的對(duì)象還沒解釋清楚怎么回事,一上來就直奔主題,類/繼承/原型/私有變量。結(jié)果呢,看了大半天,有了一個(gè)大概的了解,細(xì)細(xì)一回味,好像什么都沒懂。

這篇文章是參考<<javascript-the definitive guide,5th edition>>第7,8,9章而寫成的,我也會(huì)盡量按照原書的結(jié)構(gòu)來說明javascript的面向?qū)ο蠹夹g(shù)(對(duì)象/數(shù)組->函數(shù)-->類/構(gòu)造函數(shù)/原型).對(duì)一些我自己也拿捏不準(zhǔn)的地方,我會(huì)附上原文的英文語句,供大家參考.

類變量/類方法/實(shí)例變量/實(shí)例方法

先補(bǔ)充一下以前寫過的方法:

在javascript中,所有的方法都有一個(gè)call方法和apply方法.這兩個(gè)方法可以模擬對(duì)象調(diào)用方法.它的***個(gè)參數(shù)是對(duì)象,后面的
參數(shù)表示對(duì)象調(diào)用這個(gè)方法時(shí)的參數(shù).比如我們定義了一個(gè)方法f(),然后調(diào)用下面的語句:

f.call(o, 1, 2); 

作用就相當(dāng)于

o.m = f;  
o.m(1,2);  
delete o.m; 

舉個(gè)例子:

Js代碼：

function Person(name,age) { //定義方法  
this.name = name;  
this.age = age;  
}  
var o = new Object(); //空對(duì)象  
alert(o.name + "_" + o.age); //undefined_undefined  
Person.call(o,"sdcyst",18); //相當(dāng)于調(diào)用:o.Person("sdcyst",18)  
alert(o.name + "_" + o.age); //sdcyst_18  
Person.apply(o,["name",89]);//apply方法作用同call,不同之處在于傳遞參數(shù)的形式是用數(shù)組來傳遞  
alert(o.name + "_" + o.age); //name_89 

實(shí)例變量和實(shí)例方法都是通過實(shí)例對(duì)象加"."操作符然后跟上屬性名或方法名來訪問的,但是我們也可以為類來設(shè)置方法或變量,
這樣就可以直接用類名加"."操作符然后跟上屬性名或方法名來訪問.定義類屬性和類方法很簡(jiǎn)單:

Js代碼

Person.counter = 0; //定義類變量,創(chuàng)建的Person實(shí)例的個(gè)數(shù)  
function Person(name,age) {  
this.name = name;  
this.age = age;  
Person.counter++; //沒創(chuàng)建一個(gè)實(shí)例,類變量counter加1  
};  
Person.whoIsOlder = function(p1,p2) { //類方法,判斷誰的年齡較大  
if(p1.age > p2.age) {  
return p1;  
} else {  
return p2;  
}  
}  
var p1 = new Person("p1",18);  
var p2 = new Person("p2",22);  
alert("現(xiàn)在有 " + Person.counter + "個(gè)人"); //現(xiàn)在有2個(gè)人  
var p = Person.whoIsOlder(p1,p2);  
alert(p.name + "的年齡較大"); //p2的年齡較大  

prototype屬性的應(yīng)用:

下面這個(gè)例子是根據(jù)原書改過來的.假設(shè)我們定義了一個(gè)Circle類,有一個(gè)radius屬性和area方法,實(shí)現(xiàn)如下:

Js代碼：

function Circle(radius) {  
this.radius = radius;  
this.area = function() {  
return 3.14 * this.radius * this.radius;  
}  
}  
var c = new Circle(1);  
alert(c.area()); //3.14 

假設(shè)我們定義了100個(gè)Circle類的實(shí)例對(duì)象,那么每個(gè)實(shí)例對(duì)象都有一個(gè)radius屬性和area方法,實(shí)際上,除了radius屬性,每個(gè)Circle類的實(shí)例對(duì)象的area方法都是一樣,這樣的話,我們就可以把a(bǔ)rea方法抽出來定義在Circle類的prototype屬性中,這樣所有的實(shí)例對(duì)象就可以調(diào)用這個(gè)方法,從而節(jié)省空間.

Js代碼

function Circle(radius) {  
this.radius = radius;  
}  
Circle.prototype.area = function() {  
return 3.14 * this.radius * this.radius;  
}  
var c = new Circle(1);  
alert(c.area()); //3.14  

現(xiàn)在,讓我們用prototype屬性來模擬一下類的繼承:首先定義一個(gè)Circle類作為父類,然后定義子類PositionCircle.

Js代碼
 

function Circle(radius) { //定義父類Circle   
this.radius = radius;   
}   
Circle.prototype.area = function() { //定義父類的方法area計(jì)算面積   
return this.radius * this.radius * 3.14;   
}    
function PositionCircle(x,y,radius) { //定義類PositionCircle   
this.x = x; //屬性橫坐標(biāo)   
this.y = y; //屬性縱坐標(biāo)   
Circle.call(this,radius); //調(diào)用父類的方法,相當(dāng)于調(diào)用this.Circle(radius),設(shè)置PositionCircle類的   
//radius屬性   
}   
PositionCircle.prototype = new Circle(); //設(shè)置PositionCircle的父類為Circle類   
var pc = new PositionCircle(1,2,1);   
alert(pc.area()); //3.14   
//PositionCircle類的area方法繼承自Circle類,而Circle類的   
//area方法又繼承自它的prototype屬性對(duì)應(yīng)的prototype對(duì)象   
alert(pc.radius); //1 PositionCircle類的radius屬性繼承自Circle類   
/* 注意:在前面我們?cè)O(shè)置PositionCircle類的prototype屬性指向了一個(gè)Circle對(duì)象,因此pc的prototype屬性繼承了Circle對(duì)象的prototype屬性,而Circle對(duì)象的constructor屬性(即Circle對(duì)象對(duì)應(yīng)的prototype對(duì)象的constructor屬性)是指向Circle的,所以此處彈出   
的是Circ.   
*/   
alert(pc.constructor); //Circle   
/*為此,我們?cè)谠O(shè)計(jì)好了類的繼承關(guān)系后,還要設(shè)置子類的constructor屬性,否則它會(huì)指向父類   
的constructor屬性   
*/   
PositionCircle.prototype.constructor = PositionCircle   
alert(pc.constructor); //PositionCircle  

【編輯推薦】

1. javascript面向?qū)ο蠹夹g(shù)基礎(chǔ)(一)
2. javascript面向?qū)ο蠹夹g(shù)基礎(chǔ)(二)
3. javascript面向?qū)ο蠹夹g(shù)基礎(chǔ)(三)
4. javascript面向?qū)ο蠹夹g(shù)基礎(chǔ)(四)