JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中對(duì)象的定義和繼承詳解
本文實(shí)例講述了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中對(duì)象的定義和繼承。分享給大家供大家參考,具體如下:
在面向?qū)ο蟮腏avascript編程中,希望代碼優(yōu)雅有高效是非常重要的。javascript中不存在類的概念,只有對(duì)象。要想把Javascript代碼寫的像java 或者C++一樣優(yōu)雅,就得考慮如何去實(shí)現(xiàn),同時(shí)也要考慮性能和高效。定義javascript對(duì)象的方式有很多,繼承的方式也很多。通過不斷地實(shí)踐,推薦如下的方法:
1.Javascript對(duì)象的定義采用混合方式【構(gòu)造函數(shù) +原型方式(prototype)】
(1)通過構(gòu)造函數(shù)方式定義對(duì)象的所有非函數(shù)屬性
(2)用原型方式定義對(duì)象的函數(shù)屬性
采用這種方式,所有的屬性都是單一對(duì)象私有的,而方法則是所有對(duì)象公有的,對(duì)象之間的屬性不相互干擾,各個(gè)對(duì)象間共享同一個(gè)方法。
//使用原型+構(gòu)造函數(shù)方式來定義對(duì)象 //構(gòu)造函數(shù)定義對(duì)象的非函數(shù)屬性<strong> function Person() { this.username = new Array(); this.password = "123"; } //通過原型方式定義對(duì)象的函數(shù) Person.prototype.getInfo = function() { alert(this.username+","+this.password); }; var p = new Person(); var p2 = new Person(); p.username.push("zhangsan"); p2.username.push("lisi"); p.getInfo(); p2.getInfo();
在現(xiàn)實(shí)的開發(fā)過程中,我們可能希望開發(fā)的各個(gè)類(實(shí)質(zhì)是對(duì)象)能像java程序中放到一個(gè)包中統(tǒng)一管理,統(tǒng)一使用,而各個(gè)對(duì)象相互獨(dú)立,同時(shí)避免對(duì)象重名等等因素,我們需要給每個(gè)類有個(gè)作用域,此時(shí)我們采用將對(duì)象放到自定匿名函數(shù)的方式來解決,這一點(diǎn)和jQuery開發(fā)插件的有點(diǎn)類似。代碼如下:
/** * @author jasson * @include common.js */ //對(duì)象存在就等于對(duì)象,對(duì)象不存在就創(chuàng)建{} var JassonChart = JassonChart || {}; (function(){ //構(gòu)造函數(shù)定義對(duì)象的非函數(shù)屬性 function Person() { this.username = new Array(); this.password = "123"; } //通過原型方式定義對(duì)象的函數(shù) Person.prototype.getInfo = function() { alert(this.username+","+this.password); }; //將該類放到JassonChart中,類似java中的包,或者C++中的 JassonChart.Person= Person; }()); //調(diào)用該類庫中的Person類 var p = new JassonChart.Person();
這樣我們可以定義多個(gè)類,每個(gè)類都采用如上的方式實(shí)現(xiàn),這樣各個(gè)類相互都有作用域,非常規(guī)范。對(duì)于我們要用到的一些工具類,我們可以采用簡(jiǎn)單的對(duì)象進(jìn)行定義,代碼如下
/** * @author jasson */ var JassonChart = JassonChart || {}; JassonChart .util = { constants : { WIDTH : 'width', HEIGHT : 'height', SVG : 'SVG', CANVAS : 'CANVAS', G : 'G', //svg element STRING : 'string' }, distance : function(a, b) { var dx = a.x - b.x; var dy = a.y - b.y; return Math.sqrt(dx * dx + dy * dy); } };
2.Javascript對(duì)象的繼承采用如下幾種方式
2.1 Javascript對(duì)象的繼承采用混合方式【構(gòu)造函數(shù) +原型方式(prototype)】
在JavaScript中最好的方式就是用混合方式實(shí)現(xiàn)對(duì)象間的繼承。和定義對(duì)象一樣,我們可以將屬性和方法用不同的方式定義,用call或apply方式定義繼承對(duì)象的屬性,利用原型鏈的方式實(shí)現(xiàn)方法的繼承。如下代碼所示:
//使用混合的方式實(shí)現(xiàn)對(duì)象的繼承 function Parent(hello) { this.hello = hello;//定義父類的屬性 } Parent.prototype.sayHello = function()//定義父類的方法 { alert(this.hello); } function Child(hello,world) { Parent.call(this,hello);//繼承父類的屬性 //or Parent.apply(this,arguments);//繼承父類的屬性 this.world = world; } Child.prototype = new Parent();//繼承父類的方法 Child.prototype.sayWorld = function() { alert(this.world); } var child = new Child("hello","world"); child.sayHello(); child.sayWorld();
2.2 深度拷貝方法
所謂"深拷貝",就是能夠?qū)崿F(xiàn)真正意義上的數(shù)組和對(duì)象的拷貝。它的實(shí)現(xiàn)并不難,只要遞歸調(diào)用"淺拷貝"就行了。
function deepCopy(p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object') { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[i]; } } return c; }
使用的時(shí)候這樣寫:
var Doctor = deepCopy(Chinese);
現(xiàn)在,給父對(duì)象加一個(gè)屬性,值為數(shù)組。然后,在子對(duì)象上修改這個(gè)屬性:
Chinese.birthPlaces = ['北京','上海','香港']; Doctor.birthPlaces.push('廈門');
這時(shí),父對(duì)象就不會(huì)受到影響了。
alert(Doctor.birthPlaces); //北京, 上海, 香港, 廈門 alert(Chinese.birthPlaces); //北京, 上海, 香港
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- javascript面向?qū)ο蟪绦蛟O(shè)計(jì)實(shí)踐常用知識(shí)點(diǎn)總結(jié)
- javascript面向?qū)ο髣?chuàng)建對(duì)象的方式小結(jié)
- javascript面向?qū)ο笕筇卣髦鄳B(tài)實(shí)例詳解
- javascript面向?qū)ο笕筇卣髦^承實(shí)例詳解
- javascript面向?qū)ο笕筇卣髦庋b實(shí)例詳解
- Javascript 面向?qū)ο螅ㄒ唬?共有方法,私有方法,特權(quán)方法)
- 面向?qū)ο蟮腏avascript之二(接口實(shí)現(xiàn)介紹)
- js面向?qū)ο笾小⑺接?、靜態(tài)屬性和方法詳解
- javascript面向?qū)ο笕腴T基礎(chǔ)詳細(xì)介紹
- JavaScript 面向?qū)ο蠡A(chǔ)簡(jiǎn)單示例
相關(guān)文章
JavaScript數(shù)組操作之旋轉(zhuǎn)二維數(shù)組
這篇文章主要介紹了JavaScript數(shù)組操作之旋轉(zhuǎn)二維數(shù)組,主要從兩個(gè)方面展開文章介紹,一是通過對(duì)數(shù)組的操作熟練度;二是(鏡像反轉(zhuǎn))比實(shí)現(xiàn)一更優(yōu),減少了空間復(fù)雜度,內(nèi)容介紹具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-04-04JavaScript中的document.querySelector()方法使用詳解
HTML的DOM querySelector()方法可以不需要額外的jQuery等支持,也可以方便的獲取DOM元素,語法跟jQuery類似,這篇文章主要給大家介紹了關(guān)于JavaScript中document.querySelector()方法使用的相關(guān)資料,需要的朋友可以參考下2024-06-06javascript判斷數(shù)組內(nèi)是否重復(fù)的方法
這篇文章主要介紹了javascript判斷數(shù)組內(nèi)是否重復(fù)的方法,涉及javascript針對(duì)數(shù)組的相關(guān)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04詳解js創(chuàng)建對(duì)象的幾種方式和對(duì)象方法
這篇文章主要介紹了詳解js創(chuàng)建對(duì)象的幾種方式和對(duì)象方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03js拖動(dòng)div 當(dāng)鼠標(biāo)移動(dòng)時(shí)整個(gè)div也相應(yīng)的移動(dòng)
要拖動(dòng)的div為最外層的div,這段代碼對(duì)顯示對(duì)話框的頭部綁定鼠標(biāo)監(jiān)聽事件,當(dāng)鼠標(biāo)移動(dòng)時(shí),整個(gè)div也相應(yīng)的移動(dòng),具體的實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-11-11javascript使用location.search的示例
本文介紹javascript 使用location.search獲取當(dāng)前地址欄參數(shù)的實(shí)例2013-11-11