本文實(shí)例講述了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中對(duì)象的定義和繼承。分享給大家供大家參考，具體如下：
在面向?qū)ο蟮腏avascript編程中，希望代碼優(yōu)雅有高效是非常重要的。javascript中不存在類(lèi)的概念，只有對(duì)象。要想把Javascript代碼寫(xiě)的像java 或者C++一樣優(yōu)雅，就得考慮如何去實(shí)現(xiàn)，同時(shí)也要考慮性能和高效。定義javascript對(duì)象的方式有很多，繼承的方式也很多。通過(guò)不斷地實(shí)踐，推薦如下的方法：
（1）通過(guò)構(gòu)造函數(shù)方式定義對(duì)象的所有非函數(shù)屬性
（2）用原型方式定義對(duì)象的函數(shù)屬性
采用這種方式，所有的屬性都是單一對(duì)象私有的，而方法則是所有對(duì)象公有的，對(duì)象之間的屬性不相互干擾，各個(gè)對(duì)象間共享同一個(gè)方法。
//使用原型+構(gòu)造函數(shù)方式來(lái)定義對(duì)象//構(gòu)造函數(shù)定義對(duì)象的非函數(shù)屬性<strong>function Person(){ this.username = new Array(); this.password = "123";}//通過(guò)原型方式定義對(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í)的開(kāi)發(fā)過(guò)程中，我們可能希望開(kāi)發(fā)的各個(gè)類(lèi)（實(shí)質(zhì)是對(duì)象）能像java程序中放到一個(gè)包中統(tǒng)一管理，統(tǒng)一使用，而各個(gè)對(duì)象相互獨(dú)立，同時(shí)避免對(duì)象重名等等因素，我們需要給每個(gè)類(lèi)有個(gè)作用域，此時(shí)我們采用將對(duì)象放到自定匿名函數(shù)的方式來(lái)解決，這一點(diǎn)和jQuery開(kāi)發(fā)插件的有點(diǎn)類(lèi)似。代碼如下：
/** * @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"; } //通過(guò)原型方式定義對(duì)象的函數(shù) Person.prototype.getInfo = function() { alert(this.username+","+this.password); }; //將該類(lèi)放到JassonChart中，類(lèi)似java中的包，或者C++中的 JassonChart.Person= Person;}());//調(diào)用該類(lèi)庫(kù)中的Person類(lèi)var p = new JassonChart.Person();這樣我們可以定義多個(gè)類(lèi)，每個(gè)類(lèi)都采用如上的方式實(shí)現(xiàn)，這樣各個(gè)類(lèi)相互都有作用域，非常規(guī)范。對(duì)于我們要用到的一些工具類(lèi)，我們可以采用簡(jiǎn)單的對(duì)象進(jìn)行定義，代碼如下
/*** @author jasson*/var JassonChart = JassonChart || {};JassonChart .util = {constants : {WIDTH : 'width',HEIGHT : 'height',SVG : 'SVG',CANVAS : 'CANVAS',G : 'G', //svg elementSTRING : 'string'},distance : function(a, b) {var dx = a.x - b.x;var dy = a.y - b.y;return Math.sqrt(dx * dx + dy * dy);}};在JavaScript中最好的方式就是用混合方式實(shí)現(xiàn)對(duì)象間的繼承。和定義對(duì)象一樣，我們可以將屬性和方法用不同的方式定義，用call或apply方式定義繼承對(duì)象的屬性，利用原型鏈的方式實(shí)現(xiàn)方法的繼承。如下代碼所示：
//使用混合的方式實(shí)現(xiàn)對(duì)象的繼承function Parent(hello){ this.hello = hello;//定義父類(lèi)的屬性}Parent.prototype.sayHello = function()//定義父類(lèi)的方法{ alert(this.hello);}function Child(hello,world){ Parent.call(this,hello);//繼承父類(lèi)的屬性 //or Parent.apply(this,arguments);//繼承父類(lèi)的屬性 this.world = world;}Child.prototype = new Parent();//繼承父類(lèi)的方法Child.prototype.sayWorld = function(){ alert(this.world);}var child = new Child("hello","world");child.sayHello();child.sayWorld();所謂"深拷貝"，就是能夠?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í)候這樣寫(xiě)：
var Doctor = deepCopy(Chinese);
現(xiàn)在，給父對(duì)象加一個(gè)屬性，值為數(shù)組。然后，在子對(duì)象上修改這個(gè)屬性：
Chinese.birthPlaces = ['北京','上海','香港'];Doctor.birthPlaces.push('廈門(mén)');這時(shí)，父對(duì)象就不會(huì)受到影響了。
alert(Doctor.birthPlaces); //北京, 上海, 香港, 廈門(mén)alert(Chinese.birthPlaces); //北京, 上海, 香港
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
