首頁 > web前端 > js教程 > javascript中類別的定義方式詳解(四種方式)_javascript技巧

javascript中類別的定義方式詳解(四種方式)_javascript技巧

WBOY
發布: 2016-05-16 15:24:21
原創
1457 人瀏覽過

本文實例講述了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程式設計有所幫助。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板