javascript 混合的建構函式和原型方式,動態原型方式

來源:互聯網
上載者:User

我們日常JS編程中最常用的方式 有下面2種:
1.混合的建構函式和原型方式 (重點)
複製代碼 代碼如下:function car (sColor,iNumbers){ // 建構函式只用來定義對象的所有非函數屬性,即對象的屬性
this.color = sColor;
this.numbers = iNumbers;
this.dirvers = new Array ("Jone","Leon");
}
car.prototype.showColor = function (){ // 原型方式只用來定義對象的所有函數屬性,即對象的方法
alert(this.color);
}
var car1 = new car("red");
var car2 = new car("yellow");
car1.showColor)();
car2.showColor)();

總結:當你建立(new)一個新的對象執行個體car1和car2的時候,car1和car2都繼承函數對象car的所有的非函數屬性;此時在car函數外面給car函數對象的原型裡面產生一個showColor方法,此時car1和car2都會引用car的原型裡面的showColor方式,如果把原型方法放進car函數體裡面,那麼此時car1和car2不是引用的關係,而是每執行一次函數,就構建一次showColor函數,如果有100個car,那麼就要重複構造100個函數。所以要把非函數屬性和函數屬性分開來寫。
2.動態原型方式 (重點) 複製代碼 代碼如下:function car (sColor,iNumbers){ // 建構函式只用來定義對象的所有非函數屬性,即對象的屬性
this.color = sColor;
this.numbers = iNumbers;
this.dirvers = new Array ("Jone","Leon");
if(typeof car._initialized=="undefined"){ //此時此刻,這裡的car._initialized成立,繼續執行下面的函數
car.prototype.showColor = function (){
alert(this.color);
}
}
car._initialized = true; //
執行到這裡就停止再也不在執行第二次,因為此時此刻,car._initialized只是函數的屬性,而不是函數對象的原型屬性,如果是原型屬性的話,new一個函數對象的執行個體,就會改變函數裡面原型對象的屬性,那麼就會重複構造showColor這個函數。正因為是這個原因,當car._initialized等於undefined的時候,執行一次showColor,最後得到的car._initialized=true,這個時候改變的是函數的屬性,而不是函數原型的屬性,所以外部new一個對象執行個體根本無法改變函數的屬性,所有紅色部分的代碼就是為了做一件事情:只執行紅色代碼之間的方法,並且每種方法只有一次,不會重複執行!
}
var car1 = new car ("red");
var car2 = new car ("yellow");
car1.showColor();
car2.showColor();

總結:不管是利用上面2種方式的那一種,都可以達到相同的效果!
方法1:混合的建構函式和原型方式,相當於把非函數屬性和一般屬性分開來寫,這樣new 新對象的時候,不會重複構造新函數,此時引用的知識函數對象的原型方法和函數對象的屬性。但是,代碼看起來沒有封裝起來而且,不影響任何東西。
方法2:完全利用JAVA的編程代碼風格來實現JS的編程。這樣的好處是讓整個函數看起來像是把屬性和方法都“封裝”在一個函數體內,看起來更像一個“類”。(溫故知新:JS中其實沒有類,你要說有類,就可以把它看做一個function類),缺點是在於利用if()語句看起來不是很友好而已。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.