JavaScript:原型和繼承(上篇)

來源:互聯網
上載者:User

我們已經知道,方法就是作為對象的一個屬性來調用的一個函數。當一個函數按照這種方式被調用,用來訪問這個函數的對象就變成了this關鍵字的值。假設想要計算一個Rectangle對象所代表的矩形的面積,可以這麼做:

function computeAreaOfRectangle(r){return r.width*r.height;}

這也有效,但是並不物件導向。在使用對象的時候,最好在對象上調用方法,而不是將對象傳遞給一個函數。也就是這麼做:

var r=new Rectangle(8.5,11);r.area=function(){return this.width*this.height;}var a=r.area();

在調用一個方法前必須為對象添加這個方法。當然這裡的方法很可笑。可以在建構函式中初始化area屬性使其指向一個面積計算函數,這樣就可以改善這種狀況了。下面是改進後的Rectangle()建構函式:

function Rectangle(w,h){this.width=width;this.height=h;this.area=function(){return this.width*this.height;}}

使用這個新的建構函式,我們就可以編寫這樣的代碼:

var r=new Rectangle(8.5,11);var a=r.area();

這個解決方案很有效,但還不是最優的。建立的每個矩形都有三個屬性。每個矩形的width屬性和height屬性可能都不同,但是每個Rectangle對象的area屬性總是指向同一個函數。針對有意讓同一個類的所有對象共用的方法來使用一個常規的屬性,這樣做的效率是很低的。

可是這是一種解決方案。它證明了每個JavaScript對象都包含著對另一個對象(也就是它的原型對象)的內部引用。原型對象的任何屬性,表現為每個以它為原型的對象的屬性。這句話的另一種表達方式就是,JavaScript對象從它的原型那裡繼承屬性。

我們已經知道,用new運算子可以建立一個新的Null 物件,然後把建構函式作為這個對象的一個方法來調用。可是這並非事情的全部,在建立了這個Null 物件以後,new設定了這個對象的原型。

一個對象的原型就是它的建構函式的prototype屬性的值。所有的函數都有一個prototype屬性,當這個函數被定義的時候,prototype屬性自動建立和初始化。prototype屬性的初始化值是一個對象,這個對象只帶有一個屬性。這個屬性名稱為constructor,它指回到和原型相關聯的那個建構函式。(XxxFunction.prototype.constructor==XxxFunction)添加給這個原型對象的任何屬性,都會成為被建構函式所初始化的對象的屬性。

用一個例子來說明更清楚些。下面,再次用到Rectangle( )建構函式:

function Rectangle(w,h){this.width=w;this.height=h;}Rectangle.prototype.area=function(){return this.width*this.height;}

建構函式為對象的“類”提供一個名字並初始化width和height這樣的屬性,這些屬性可能在類的每個執行個體中都不同。原型對象和這個建構函式相關,並且,建構函式初始化的每個對象都確實從原型那裡繼承了完全相同的一組屬性。這意味著,原型對象是放置方法和其他不變屬性的理想地方。

<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"></head><body><script>  String.prototype.say=function(message){return message;}</script> <a href="javascript:'tom'.say('hello');">test</a></body></html>

注意,繼承作為尋找一個屬性值的過程的一部分自動發生。屬性並非從原型對象複製到新對象,它們只是像那些對象的屬性一樣地出現。這有兩個重要的含義:

① 首先,使用原型對象可以顯著地減少每個對象所需的記憶體,因為對象可以繼承原型的很多屬性。

② 即便是在對象建立以後才添加到原型中的屬性,對象也可以繼承它。這意味著,可以為已有的類添加新方法。

繼承的屬性就好像對象的常規屬性一樣發揮作用。可以用for/in迴圈來枚舉它們,並在in運算子中測試它們。只能用Object.hasOwnProperty( )來區分繼承的屬性和常規的屬性。

var r=new Rectangle(2,3);r.hasOwnProperty("width");  //truer.hasOwnProperty("area");  //false"area" in r;  //true

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.