javascript中類的定義方式詳解(四種方式),

來源:互聯網
上載者:User

javascript中類的定義方式詳解(四種方式),

本文執行個體講述了javascript中類的定義方式。分享給大家供大家參考,具體如下:

類的定義包括四種方式:

1、工廠方式

function createCar(name,color,price){  var tempcar=new Object;  tempcar.name=name;  tempcar.color=color;  tempcar.price=price;  tempcar.getName=function(){   document.write(this.name+"-----"+this.color+"<br>");  };  return tempcar;}var car1=new createCar("工廠桑塔納","red","121313");car1.getName();

定義了一個能建立並返回特定類型對象的工廠函數, 看起來還是不錯的, 但有個小問題 ,

每次調用時都要建立新函數 showColor,我們可以把它移到函數外面,

function getName(){  document.write(this.name+"-----"+this.color+"<br>");}

在工廠函數中直接指向它
複製代碼 代碼如下:tempCar.getName = getName;

這樣避免了重複建立函數的問題,但看起來不像對象的方法了。

2、建構函式方式

function Car(name,color,price){  this.name=name;  this.color=color;  this.price=price;  this.getColor=function(){   document.write(this.name+"-----"+this.color+"<br>");  };}var car2=new Car("構造桑塔納","red","121313");car2.getColor(); 

可以看到與第一中方式的差別,在建構函式內部無建立對象,而是使用 this 關鍵字。

使用 new 調用建構函式時,先建立了一個對象,然後用 this 來訪問。

這種用法於其他物件導向語言很相似了, 但這種方式和上一種有同一個問題, 就是重複建立函數。

3、原型方式

function proCar(){}proCar.prototype.name="原型";proCar.prototype.color="blue";proCar.prototype.price="10000";proCar.prototype.getName=function(){  document.write(this.name+"-----"+this.color+"<br>");};var car3=new proCar();car3.getName();

首先定義了建構函式 Car,但無任何代碼,然後通過 prototype 添加屬性。優點:

a. 所有執行個體存放的都是指向 showColor 的指標,解決了重複建立函數的問題

b. 可以用 instanceof 檢查物件類型
複製代碼 代碼如下:alert(car3 instanceof proCar);//true

缺點,添加下面的代碼:

proCar.prototype.drivers = newArray("mike", "sue");car3.drivers.push("matt");alert(car3.drivers);//outputs "mike,sue,matt"alert(car3.drivers);//outputs "mike,sue,matt"

drivers 是指向 Array 對象的指標,proCar 的兩個執行個體都指向同一個數組。

4、動態原型方式

function autoProCar(name,color,price){  this.name=name;  this.color=color;  this.price=price;  this.drives=new Array("mike","sue");  if(typeof autoProCar.initialized== "undefined"){   autoProCar.prototype.getName =function(){   document.write(this.name+"-----"+this.color+"<br>");   };   autoProCar.initialized=true;  }}var car4=new autoProCar("動態原型","yellow","1234565");car4.getName();car4.drives.push("newOne");document.write(car4.drives);

這種方式是我最喜歡的, 所有的類定義都在一個函數中完成, 看起來非常像其他語言的類定義,不會重複建立函數,還可以用 instanceof

希望本文所述對大家JavaScript程式設計有所協助。

您可能感興趣的文章:
  • javascript定義類和類的實現執行個體詳解
  • javascript中定義類的方法詳解
  • javascript中定義類的方法匯總
  • JavaScript定義類的幾種方式總結
  • javascript中類的定義及其方式(《javascript進階程式設計》學習筆記)
  • javascript來定義類的規範小結
  • JavaScript 類的定義和引用 JavaScript進階培訓 自訂對象
  • 擷取JavaScript使用者自訂類的類名稱的代碼

聯繫我們

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