JavaScript面向?qū)ο蟪绦蛟O(shè)計中對象的定義和繼承詳解
本文實例講述了JavaScript面向?qū)ο蟪绦蛟O(shè)計中對象的定義和繼承。分享給大家供大家參考，具體如下：
在面向?qū)ο蟮腏avascript編程中，希望代碼優(yōu)雅有高效是非常重要的。javascript中不存在類的概念，只有對象。要想把Javascript代碼寫的像java 或者C++一樣優(yōu)雅，就得考慮如何去實現(xiàn)，同時也要考慮性能和高效。定義javascript對象的方式有很多，繼承的方式也很多。通過不斷地實踐，推薦如下的方法：
1.Javascript對象的定義采用混合方式【構(gòu)造函數(shù) +原型方式（prototype）】
（1）通過構(gòu)造函數(shù)方式定義對象的所有非函數(shù)屬性
（2）用原型方式定義對象的函數(shù)屬性
采用這種方式，所有的屬性都是單一對象私有的，而方法則是所有對象公有的，對象之間的屬性不相互干擾，各個對象間共享同一個方法。
//使用原型+構(gòu)造函數(shù)方式來定義對象
//構(gòu)造函數(shù)定義對象的非函數(shù)屬性<strong>
function Person()
{
this.username = new Array();
this.password = "123";
}
//通過原型方式定義對象的函數(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)實的開發(fā)過程中，我們可能希望開發(fā)的各個類（實質(zhì)是對象）能像java程序中放到一個包中統(tǒng)一管理，統(tǒng)一使用，而各個對象相互獨立，同時避免對象重名等等因素，我們需要給每個類有個作用域，此時我們采用將對象放到自定匿名函數(shù)的方式來解決，這一點和jQuery開發(fā)插件的有點類似。代碼如下：
/**
* @author jasson
* @include common.js
*/
//對象存在就等于對象，對象不存在就創(chuàng)建{}
var JassonChart = JassonChart || {};
(function(){
//構(gòu)造函數(shù)定義對象的非函數(shù)屬性
function Person()
{
this.username = new Array();
this.password = "123";
}
//通過原型方式定義對象的函數(shù)
Person.prototype.getInfo = function()
{
alert(this.username+","+this.password);
};
//將該類放到JassonChart中，類似java中的包，或者C++中的
JassonChart.Person= Person;
}());
//調(diào)用該類庫中的Person類
var p = new JassonChart.Person();
這樣我們可以定義多個類，每個類都采用如上的方式實現(xiàn)，這樣各個類相互都有作用域，非常規(guī)范。對于我們要用到的一些工具類，我們可以采用簡單的對象進行定義，代碼如下
/**
* @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對象的繼承采用如下幾種方式
2.1 Javascript對象的繼承采用混合方式【構(gòu)造函數(shù) +原型方式（prototype）】
在JavaScript中最好的方式就是用混合方式實現(xiàn)對象間的繼承。和定義對象一樣，我們可以將屬性和方法用不同的方式定義，用call或apply方式定義繼承對象的屬性，利用原型鏈的方式實現(xiàn)方法的繼承。如下代碼所示：
//使用混合的方式實現(xiàn)對象的繼承
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ù)組和對象的拷貝。它的實現(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;
}
使用的時候這樣寫：
var Doctor = deepCopy(Chinese);
現(xiàn)在，給父對象加一個屬性，值為數(shù)組。然后，在子對象上修改這個屬性：
Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('廈門');
這時，父對象就不會受到影響了。
alert(Doctor.birthPlaces); //北京, 上海, 香港, 廈門 alert(Chinese.birthPlaces); //北京, 上海, 香港
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- javascript面向?qū)ο蟪绦蛟O(shè)計實踐常用知識點總結(jié)
- javascript面向?qū)ο髣?chuàng)建對象的方式小結(jié)
- javascript面向?qū)ο笕筇卣髦鄳B(tài)實例詳解
- javascript面向?qū)ο笕筇卣髦^承實例詳解
- javascript面向?qū)ο笕筇卣髦庋b實例詳解
- Javascript 面向?qū)ο螅ㄒ唬?共有方法，私有方法，特權(quán)方法)
- 面向?qū)ο蟮腏avascript之二(接口實現(xiàn)介紹)
- js面向?qū)ο笾小⑺接?、靜態(tài)屬性和方法詳解
- javascript面向?qū)ο笕腴T基礎(chǔ)詳細介紹
- JavaScript 面向?qū)ο蠡A(chǔ)簡單示例
相關(guān)文章
一些常用的JS功能函數(shù)(2009-06-04更新)
將 ClientMentInfo類改成了兼容IE6,IE7,IE8,Vista,Windows 7和Firefox2009-06-06
JS實現(xiàn)超簡單的漢字轉(zhuǎn)拼音功能示例
這篇文章主要介紹了JS實現(xiàn)超簡單的漢字轉(zhuǎn)拼音功能,結(jié)合實例形式分析了javascript漢字轉(zhuǎn)換成拼音的函數(shù)定義與使用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS多物體實現(xiàn)緩沖運動效果的方法,涉及javascript基于時間函數(shù)進行動態(tài)運算實現(xiàn)頁面元素動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS實現(xiàn)模擬風(fēng)力的雪花飄落效果,可在右側(cè)填入風(fēng)力值點擊按鈕即可看到伴隨風(fēng)力的雪花飄落效果,同時右側(cè)有實時雪花數(shù)量統(tǒng)計功能,需要的朋友可以參考下2015-05-05
這篇文章主要給大家介紹了d3.js中強制異步文件讀取同步的幾種方法，文中給出了詳細的介紹和解決方法，對大家具有一定的參考價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-02-02
微信 java 實現(xiàn)js-sdk 圖片上傳下載完整流程
這篇文章主要介紹了微信 java 實現(xiàn)js-sdk 圖片上傳下載完整流程的相關(guān)資料,需要的朋友可以參考下2016-10-10
讓網(wǎng)站自動生成章節(jié)目錄索引的多個js代碼
這篇文章主要介紹了讓博客園博客自動生成章節(jié)目錄索引的多個js代碼,需要的朋友可以參考下2018-01-01
GreyBox技術(shù)總結(jié)（轉(zhuǎn)）
GreyBox是一個遮罩層的組件也稱模式窗口或模態(tài)窗口（所謂模態(tài)窗口，就是指除非采取有效的關(guān)閉手段，用戶的鼠標焦點或者輸入光標將一直停留在其上的窗口），它運行以后可以產(chǎn)生不錯的界面。2010-11-11
微信小程序網(wǎng)絡(luò)請求實現(xiàn)過程解析
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請求實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
Javascript基于jQuery UI實現(xiàn)選中區(qū)域拖拽效果
這篇文章主要介紹了Javascript基于jQuery UI實現(xiàn)選中區(qū)域拖拽效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11