JavaScript中數(shù)組繼承的簡(jiǎn)單示例
在寫一些庫(kù)時(shí)經(jīng)常會(huì)用到樹結(jié)構(gòu)的數(shù)據(jù),而且一些樹形結(jié)構(gòu)的數(shù)據(jù)對(duì)從根到葉的路徑獲取需求非常高。比如一個(gè)站點(diǎn)的整個(gè)路由表就是一棵這樣的樹,它的「路徑」實(shí)際上就是 URL 中的 path 部分。所以我好幾次都用了喪心病狂的數(shù)組繼承去實(shí)現(xiàn),下面給大家分享下。
在 JavaScript 中,數(shù)組也屬于 Object 的一種,它也可以繼承。任何兩個(gè)對(duì)象本身就可以有繼承關(guān)系,數(shù)組也不例外。于是我們讓一個(gè)樹的任何一個(gè)節(jié)點(diǎn)都是數(shù)組,它只維護(hù)自己下標(biāo)最大的那個(gè)元素的值。其它元素的值通過(guò)原型繼承從祖先節(jié)點(diǎn)繼承而來(lái)。這樣我們就可以像操作一般數(shù)組一樣在葉節(jié)點(diǎn)上訪問(wèn)從根節(jié)點(diǎn)過(guò)來(lái)的路徑了。下面是一個(gè)簡(jiǎn)易實(shí)現(xiàn):
運(yùn)行
<script>
// 定義節(jié)點(diǎn)類
var TNode = function(value) {
this.push(value);
};
TNode.prototype = [];
TNode.prototype.constructor = TNode;
TNode.prototype.createChild = function(value) {
var node = Object.create(this);
TNode.call(node, value);
return node;
};
// 使用節(jié)點(diǎn)造出一棵簡(jiǎn)單的樹
var root = new TNode('root');
var a = root.createChild('a');
var b = a.createChild('b');
// 將葉節(jié)點(diǎn)視為數(shù)組,直接得到路徑
document.write(b.join('/')); <!-- root/a/b
</script>
這個(gè)用法算是比較黑的魔法,如果不懂原型繼承的原理可能很難看懂。所以如果只是作為一個(gè)庫(kù)的實(shí)現(xiàn)也許可以這么寫(我已經(jīng)用過(guò)好多次了,事實(shí)證明并沒(méi)有坑),但直接在業(yè)務(wù)代碼中如果這么用就可能被吐槽到死。雖然這個(gè)用法并沒(méi)有違背 JavaScript 這種語(yǔ)言的核心思想。
這個(gè)用法的一個(gè)特點(diǎn)就是祖先節(jié)點(diǎn)的值更新時(shí)會(huì)自動(dòng)同步到所有子節(jié)點(diǎn)上。雖然原型鏈訪問(wèn)也存在性能開銷,但比起在代碼層自己去遍歷樹已經(jīng)是快得不能再多了。當(dāng)然如果沒(méi)有這樣的需求,只是想實(shí)現(xiàn)一棵簡(jiǎn)簡(jiǎn)單單的數(shù)還是使用傳統(tǒng)方式比較好。畢竟這太依賴語(yǔ)言了,以后如果要遷移到別的編程語(yǔ)言可能會(huì)比較困難。
相關(guān)文章
前端?el-table?本地搜索的實(shí)現(xiàn)代碼
這篇文章主要介紹了前端?el-table?本地搜索的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08
javaScript NameSpace 簡(jiǎn)單說(shuō)明介紹
命名空間,一看就知道主要目的是為了避免沖突。下面就來(lái)說(shuō)一下如何打造自己的JavaScript命名空間。2013-07-07
Javascript基礎(chǔ)教程之函數(shù)對(duì)象和屬性
這篇文章主要介紹了Javascript基礎(chǔ)教程之函數(shù)對(duì)象和屬性,需要的朋友可以參考下2015-01-01
Javascript 入門基礎(chǔ)學(xué)習(xí)
習(xí).net已經(jīng)近2年了,最近學(xué)習(xí)Ajax時(shí)發(fā)現(xiàn)自己的很多技術(shù)功底很是欠缺,比如JavaScript。今后我會(huì)將我正在學(xué)習(xí)的也寫成筆記,有時(shí)間的話將以前的東西整理整理也傳上來(lái)。2010-03-03
溫故知新——JavaScript中的字符串連接問(wèn)題最全總結(jié)(推薦)
這篇文章主要介紹了JS中的字符串連接問(wèn)題,ECMAScript 中最常見的一個(gè)問(wèn)題是字符串連接的性能。在調(diào)用 join() 方法時(shí)才會(huì)發(fā)生連接操作,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08
JavaScript中用于生成隨機(jī)數(shù)的Math.random()方法
這篇文章主要介紹了JavaScript中用于生成隨機(jī)數(shù)的Math.random()方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06

