現總結一下Javascript創建類和對象的幾種方法:
1、原始的創建方法:
<script type="text/javascript">
var person = new Object();
person.name="Amy";
person.sex="Woman";
person.show=function(){
document.write("name is: "+this.name+" ; sex is:"+this.sex);
}
person.show();
</script>
原始的創建方法對于熟悉面向對象的人來說難以接受,總感覺屬性和方法的封裝不是很緊密,這種封裝是以“對象名”+“.”的方式進行,表示對象名后跟的屬性和方法是這個對象擁有的東西,這個對象(例如:person)就是封裝好的結果,你可以繼續追加方法和屬性,例如追加age屬性:person.age=23;這種創建方法會讓熟悉Java編程的人感到很難受。我們可以對原始的創建方法進一步“封裝”一下,請看下一步:
2、工廠方法模式:
<script type="text/javascript">
function personFactory(name,age,sex){
var ob=new Object();
ob.name=name;
ob.age=age;
ob.sex=sex;
ob.show=function(){
document.write(ob.name+" "+ob.age+" "+ob.sex);
}
return ob;
}
var person=personFactory("Amy",21,"Woman");
person.show();
</script>
工廠方法模式看起來更像一個類了,personFactory對原始的創建方法進行了封裝,并將創建好的對象返回給person引用變量,person就可以引用這個創建好的對象了,但是還不夠完美:你每一次創建一個對象, 并使用該對象調用show()方法時,都會創建新的show()函數,它們完全可以調用同一個show方法,優化方法是將show放到工廠外,如下:
<script type="text/javascript">
function show(){
document.write(this.name+" "+this.age+" "+this.sex);
}
function personFactory(name,age,sex){
var ob=new Object();
ob.name=name;
ob.age=age;
ob.sex=sex;
ob.show=show;
return ob;
}
var person=personFactory("Amy",22,"Woman");
person.show();
</script>
從功能上說,上面的代碼解決了函數重用問題,但是呈現方式不像是創建一個對象,熟悉Java的人仍感到難受。請看下一步:
3、構造方法模式:
<script type="text/javascript">
function person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.show=function(){
document.write(this.name+" "+this.age+" "+this.sex);
document.write("<br>");
}
}
var per=new person("Amy",22,"Woman");
per.show();
</script>
上述代碼的創建方式已經與Java類和對象的創建方式幾乎一樣了,封裝好類的屬性和方法,然后利用new關鍵字創建并返回一個對象,這不就是Java創建類和對象的過程嗎,是的,就是這個過程,但是還可以優化,這種方式創建的對象調用show方法是也會即時地創建一個show函數,我們能不能創建一個所有對象公用的一個方法呢?就像Java類中的static方法一樣,所有對象都使用同一個static方法,答案是可以的。請看下一步:
4、動態原型方法:
<script type="text/javascript">
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
if(typeof Person.tag == "undefined"){
Person.prototype.show=function(){
document.write(this.name+" "+this.age+" "+this.sex);
document.write("<br>");
}
Person.tag=true;
}
}
var per=new Person("Peter",22,"Man");
per.show();
</script>
這里使用了一點技巧,當用new創建對象是,會執行Person功能塊中的if判斷語句,順序從上往下,剛開始tag變量當然沒有定義,所以執行if語句塊里的內容:
Person.prototype.show=function(){
document.write(this.name+" "+this.age+" "+this.sex);
document.write("<br>");
}
這段內容的含義是創建一個屬于類Person的show方法,注意,它是一個類方法,相當于Java中static修飾后的方法,而非單個對象的方法,這樣所有的對象均可調用同一個方法了,這樣也不用每次不同對象調用方法是都創建自己的show函數了,既節省空間又節省時間,這種方法豈不更妙。這里解釋一下,以“類名.prototype.屬性/方法”方式構造的屬性和方法相當于Java中用static修飾的變量或方法,是屬于整個類的,而非單個的對象,也即所有對象是共享的。
以上是學習JS類和對象的總結,其中個人理解錯誤之處還望大家批評指正。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。