好程式設計師前端學習路線分享模擬JavaScript中物件導向技術
好程式設計師前端學習路線分享模擬JavaScript中物件導向技術,在C#和Java語言中,物件導向是以類的方式實現的,特別是繼承這個特性,類的方式繼承表現出了強大的功能,而且也易於學習。JavaScript不是純的物件導向的語言,而是基於物件的語言,物件的繼承是以原型函式的形式繼承的,很多初學者剛開始接觸的時候不太理解,但是JavaScript這種以原型函式的形式實現物件導向技術,不僅是可行的,而且還為物件導向技術提供了動態繼承的功能,本文主要討論了JavaScript的物件導向技術。
一
、原型物件概述
每個JavaScript物件都有原型物件,物件都繼承原型物件的所有屬性。一個物件的原型是由建立該物件的建構函式定義的。JavaScript的所有函式都有一個名為prototype的屬性,該屬性引用了原型物件,該原型物件初始化的時候只有constructor屬性來引用建立該原型物件的物件。JavaScript沒有Class定義類的概念,建構函式就定義了類,並初始化類中的屬性,每個類的成員都會從原型物件中繼承相同的屬性,也就是說,原型物件提供了類的例項共享的屬性和方法,這就節約了記憶體。
當讀取一個物件的屬性的時候,JavaScript會先從物件中查詢,如果沒有查詢到,才會到原型物件中查詢該屬性(或方法),所以,尤其是對於方法,最好儲存到原型物件中以便於共享,並且達到節省記憶體的目的,而且原型物件還有一個強大的功能,那就是如果透過建構函式例項化一些物件後,再給建構函式的原型物件增加屬性和方法,那麼它原來例項化的物件例項將會繼承這些增加的屬性和方法。
二
、物件屬性、物件方法、類屬性、類方法
每個物件都會有自己單獨的例項屬性和例項方法的副本,如果例項化5個物件,那麼就會有5個物件的例項屬性和例項方法副本。This關鍵字引用它們的例項物件,也就是說,誰操作了例項方法,this就引用誰;訪問了哪個例項物件的屬性,this就引用這個例項物件。
類方法和類屬性只有一個副本,類方法呼叫的時候必須引用類的名字,例如:Date.setHours();
下面用一個程式來表現例項屬性、例項方法、類屬性、類方法
function Mobile(kind,brand) {
this.kind=kind;//定義手機的種類,例如GSM/CDMA
this.brand=brand;//定義手機的品牌,this關鍵字表示用該建構函式例項化之後的物件
}
/**//*
定義類的第二步是在建構函式的原型物件中定義它的例項方法或其他屬性
該物件定義的任何屬性都將這個類的所有例項繼承。
*/
//撥號,這裡只是返回電話號碼
Mobile.prototype.dial = function (phoneNo ) {
return phoneNo;
};
/**//*
定義類的第三步是定義類方法,常量和其他必要的類屬性,作為建構函式自身的屬性,而不是建構函式
原型物件的屬性,注意,類方法沒有使用關鍵字this,因為他們只對他們的實際引數進行操作。
*/
//開機關機方法
Mobile.turnOn=function() {
return "The power of mobile is on";
}
Mobile.turnOff=function() {
return "The power of mobile is off";
}
//類屬性,這樣他們就可以被用作常量,注意實際上他們並不是只讀的
Mobile.screenColor=64K;//假設該類手機的螢幕顏色都是64K彩屏的
三
、子類化
JavaScript支援子類化,只需把子類的原型物件用超類例項化即可,但是應該注意,這樣子類化之後就會存在一個問題,由於是用超類例項化子類的原型物件取得的,所以就沖掉了自己本身的由JavaScript提供的constructor屬性,為了確保constructor的正確性,需要重新指定一下,子類化的程式例子如下:
/***** 子類化 *****/
//下面是子類建構函式智慧型手機
function SmartPhone(os)
{
this.os=os;
}
//我們將Mobile物件作為它的原型
//這意味著新類的例項將繼承SmartPhone.prototype,
//後者由Mobile.prototype繼承而來
//Mobile.prototype又由Object.prototype繼承而來
SmartPhone.prototype=new Mobile(GSM,Nokia);
//下面給子類新增一個新方法,傳送電子郵件,這裡只是返回Email地址
SmartPhone.prototype.sendEmail=function(emailAddress) {
return this.emailAddress
}
//上面的子類化方法有一點缺陷,由於我們明確把SmartPhone.prototype設成了我們所建立的一個物件,所以就覆蓋了JS提供
//的原型物件,而且丟棄了給定的Constructor屬性。該屬性引用的是建立這個物件的建構函式。但是SmartPhone物件整合了它的
//父類的constructor,它自己沒有這個屬性,明確設定著一個屬性可以解決這個問題:
SmartPhone.prototype.constructor=SmartPhone;
var objSmartPhone=new SmartPhone();//例項化子類
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2655442/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師web前端學習路線之Javascript物件導向程式設計師Web前端JavaScript物件
- 好程式設計師Java學習路線分享怎麼理解Java物件導向程式設計師Java物件
- 好程式設計師前端教程-javascript的物件導向程式設計師前端JavaScript物件
- 好程式設計師Java教程分享Java物件導向與程式導向程式設計師Java物件
- 好程式設計師web前端分享前端學習路線自學如何找到工作程式設計師Web前端
- 好程式設計師web前端學習路線分享前端基礎面試題程式設計師Web前端面試題
- 好程式設計師Java學習路線分享JavaEE的13種核心技術程式設計師Java
- 好程式設計師web前端培訓分享學習JavaScript程式設計師Web前端JavaScript
- 好程式設計師web前端學習路線分享函式基礎程式設計師Web前端函式
- 好程式設計師web前端學習路線分享Jsonp詳解程式設計師Web前端JSON
- 好程式設計師web前端學習路線分享滾動穿透方法程式設計師Web前端穿透
- 好程式設計師web前端分享初學者必看web前端學習路線圖程式設計師Web前端
- JavaScript模擬物件導向JavaScript物件
- 前端_JavaScript_物件導向程式設計前端JavaScript物件程式設計
- 《JavaScript物件導向程式設計指南》 - JavaScript好書JavaScript物件程式設計
- 好程式設計師web前端培訓分享JavaScript學習指南程式設計師Web前端JavaScript
- 好程式設計師大資料學習路線分享Scala系列之物件程式設計師大資料物件
- 好程式設計師Java學習路線JSP物件程式設計師JavaJS物件
- 好程式設計師web前端分享前端 javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師Java學習路線分享SpringCloud程式設計師JavaSpringGCCloud
- 軟體設計師:物件導向技術物件
- 好程式設計師web前端學習路線分享CSS浮動-文件流篇程式設計師Web前端CSS
- 好程式設計師web前端學習路線分享瞭解AJAX是什麼程式設計師Web前端
- 好程式設計師web前端分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端分享前端javascript練習題一程式設計師Web前端JavaScript
- 好程式設計師Java學習路線分享JavaScript基本資料型別分析程式設計師JavaScript資料型別
- 好程式設計師Java學習路線分享mybatis對映程式設計師JavaMyBatis
- 好程式設計師大資料學習路線分享MAPREDUCE程式設計師大資料
- 好程式設計師大資料學習路線分享SparkSQl程式設計師大資料SparkSQL
- 好程式設計師web前端學習路線分享web測試之Js中的函式程式設計師Web前端JS函式
- 好程式設計師web前端學習路線之在JavaScript中使用getters和setter程式設計師Web前端JavaScript
- 學習筆記:物件導向程式設計技術(C++版)筆記物件程式設計C++
- JavaScript 中的物件導向程式設計JavaScript物件程式設計
- 好程式設計師技術分享淺談JavaScript中的閉包程式設計師JavaScript
- 好程式設計師web前端教程分享JavaScript Math(算數)物件程式設計師Web前端JavaScript物件
- 好程式設計師Java培訓分享Java物件導向概念解析程式設計師Java物件
- 好程式設計師Java學習路線分享Java中的位移運算程式設計師Java
- 好程式設計師大資料學習路線分享Hbase指令學習程式設計師大資料