不錯的JavaScript面向?qū)ο蟮暮唵稳腴T介紹
更新時間:2008年07月03日 20:50:41 作者:
JavaScript是一門OOP,而有些人說,JavaScript是基于對象的。
4) 方法
以下例子引用于<<__JavaScript: The Definitive Guide>>
function Rectangle_area( ) { return this.width * this.height; }
function Rectangle_perimeter( ) { return 2*this.width + 2*this.height; }
function Rectangle_set_size(w,h) { this.width = w; this.height = h; }
function Rectangle_enlarge( ) { this.width *= 2; this.height *= 2; }
function Rectangle_shrink( ) { this.width /= 2; this.height /= 2; }
function Rectangle(w, h)
{
this.width = w;
this.height = h;
this.area = Rectangle_area;
this.perimeter = Rectangle_perimeter;
this.set_size = Rectangle_set_size;
this.enlarge = Rectangle_enlarge;
this.shrink = Rectangle_shrink;
}
這種風(fēng)格可能和Java,c++很不同。方法中的this表示調(diào)用它的對象的引用。
5) prototype
prototype是一個對象,每個類都包含一個prototype對象(注意,每個類一個,而不是每個對象一個)。
看看下面的例子:
function User(name)
{
this.name = name
}
User.prototype.name = "killercat" // 類名.prototype.屬性(或方法)
user = new User("who"+"<br />")
document.write(user.name)
delete user.name
document.write(user.name)
再看一個例子:
function User(name)
{
}
User.prototype.name = "human"
user1 = new User()
user2 = new User()
document.write(user1.name+"<br />")
document.write(user2.name)
結(jié)果:
human
human
說明了,每個類一個prototype對象,而不是每個對象單獨一個。
obj.x 這條語句的查找順序是,先在obj中找x屬性,假如沒有,再進入obj對應(yīng)的類中找prototype.x,對于方法來說,也一樣。因此,不要出現(xiàn)這樣的語句: user.prototype.name = "xxx" 必須是 user.name = "xxx" (prototype對象屬于一個類,而不是一個對象)
類名.prototype.屬性 // 相當于一個實例變量(屬性),對方法也一樣
類名.屬性 // 相當于一個靜態(tài)變量(屬性),對方法也一樣,調(diào)用的時候必須使用"類名.屬性",不能使用"類對象.屬性",因為它屬于一個類,而不是一個對象。
例如:
function User(name)
{
this.name = name
}
User.type = "human"
user = new User("kc")
document.write(User.type + "<br />")
document.write(user.type)
結(jié)果:
human
undefined
另外,每個prototype都有一個constructor屬性,默認用于保存constructor的定義,例如上面的user對象,調(diào)用:
user.constructor得到:
function User(name) { this.name = name; }
我們可以通過typeof,知道參數(shù)的類型,假如是對象,就返回"object",假如是方法就返回"function"
6) 利用prototype實現(xiàn)類間的繼承,例如:
// 父類
function Circle(r){
this.r = r;
}
Circle.PI = 3.14;
Circle.prototype.getArea = function (){
return Circle.PI * this.r * this.r;
};
Circle.prototype.toString = function (){
if(( typeof this == "object") && (this.constructor == Circle)){
return "circle with a radius " + this.r ;
}
else{
return "unknown object";
}
};
Circle.max = function (c1,c2){
return c1.r >= c2.r ? c1 : c2;
};
// 子類
function ColorCircle(r,color){
this.r = r;
this.color = color;
}
ColorCircle.prototype = new Circle(0); // 保存父類的對象
ColorCircle.prototype.constructor = ColorCircle; // 為constructor 改名字
ColorCircle.prototype.toString = function(){
if(( typeof this == "object") && (this.constructor == ColorCircle)){
return this.color+" circle with a radius " + this.r ;
}
else{
return "unknown object";
}
}
ColorCircle.prototype.getColor = function(){
return this.color;
}
ColorCircle.prototype.setColor = function(color){
this.color = color;
}
也就是,使用prototype保存父類的對象,在構(gòu)造子類的時候,父類對象同時被構(gòu)造(因為prototype被構(gòu)造)。也就是JavaScript繼承其實就是讓子類的prototype對象保存父類的對象。
您可能感興趣的文章:
- JavaScript面向?qū)ο蟮膬煞N書寫方法以及差別
- JavaScript面向?qū)ο缶幊?/a>
- JS面向?qū)ο蟆rototype、call()、apply()
- javascript 面向?qū)ο笕吕砭氈當?shù)據(jù)的封裝
- Javascript 面向?qū)ο螅ㄒ唬?共有方法,私有方法,特權(quán)方法)
- JS左右無縫滾動(一般方法+面向?qū)ο蠓椒ǎ?/a>
- jquery方法+js一般方法+js面向?qū)ο蠓椒▽崿F(xiàn)拖拽效果
- javascript面向?qū)ο笕腴T基礎(chǔ)詳細介紹
- 學(xué)習(xí)javascript面向?qū)ο?理解javascript對象
相關(guān)文章
AppBaseJs 類庫 網(wǎng)上常用的javascript函數(shù)及其他js類庫寫的
AppBaseJs類庫。一個借鑒了網(wǎng)上常用的函數(shù)及其他js類庫寫的,方便大家的調(diào)用。2010-03-03[推薦]javascript 面向?qū)ο蠹夹g(shù)基礎(chǔ)教程
看了很多介紹javascript面向?qū)ο蠹夹g(shù)的文章,很暈.為什么?不是因為寫得不好,而是因為太深奧. javascript中的對象還沒解釋清楚怎么回事,一上來就直奔主題,類/繼承/原型/私有變量....2009-03-03Javascript 類與靜態(tài)類的實現(xiàn)(續(xù))
由于MM的事件已干完,接著我們的靜態(tài)類的實現(xiàn)。這東西在Javascript里用得會非常的頻繁,因為針對現(xiàn)在的網(wǎng)頁,多個基于同一個類對象的頁面不多,往往不同塊對象的交互就可以解決問題了,這就需要在JS針對元素定義幾個靜態(tài)類就可以完事了,進入正題。2010-04-04