JavaScript中數(shù)組繼承的簡單示例
在寫一些庫時經(jīng)常會用到樹結(jié)構(gòu)的數(shù)據(jù),而且一些樹形結(jié)構(gòu)的數(shù)據(jù)對從根到葉的路徑獲取需求非常高。比如一個站點的整個路由表就是一棵這樣的樹,它的「路徑」實際上就是 URL 中的 path 部分。所以我好幾次都用了喪心病狂的數(shù)組繼承去實現(xiàn),下面給大家分享下。
在 JavaScript 中,數(shù)組也屬于 Object 的一種,它也可以繼承。任何兩個對象本身就可以有繼承關(guān)系,數(shù)組也不例外。于是我們讓一個樹的任何一個節(jié)點都是數(shù)組,它只維護自己下標最大的那個元素的值。其它元素的值通過原型繼承從祖先節(jié)點繼承而來。這樣我們就可以像操作一般數(shù)組一樣在葉節(jié)點上訪問從根節(jié)點過來的路徑了。下面是一個簡易實現(xiàn):
運行
<script> // 定義節(jié)點類 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é)點造出一棵簡單的樹 var root = new TNode('root'); var a = root.createChild('a'); var b = a.createChild('b'); // 將葉節(jié)點視為數(shù)組,直接得到路徑 document.write(b.join('/')); <!-- root/a/b </script>
這個用法算是比較黑的魔法,如果不懂原型繼承的原理可能很難看懂。所以如果只是作為一個庫的實現(xiàn)也許可以這么寫(我已經(jīng)用過好多次了,事實證明并沒有坑),但直接在業(yè)務(wù)代碼中如果這么用就可能被吐槽到死。雖然這個用法并沒有違背 JavaScript 這種語言的核心思想。
這個用法的一個特點就是祖先節(jié)點的值更新時會自動同步到所有子節(jié)點上。雖然原型鏈訪問也存在性能開銷,但比起在代碼層自己去遍歷樹已經(jīng)是快得不能再多了。當然如果沒有這樣的需求,只是想實現(xiàn)一棵簡簡單單的數(shù)還是使用傳統(tǒng)方式比較好。畢竟這太依賴語言了,以后如果要遷移到別的編程語言可能會比較困難。
相關(guān)文章
javascript中的對象和數(shù)組的應(yīng)用技巧
javascript中的對象和數(shù)組的應(yīng)用技巧...2007-01-01深入理解Javascript中的自執(zhí)行匿名函數(shù)
下面小編就為大家?guī)硪黄钊肜斫釰avascript中的自執(zhí)行匿名函數(shù)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06JavaScript中關(guān)于indexOf的使用方法與問題小結(jié)
indexOf方法的作用是:根據(jù)給定參數(shù)x返回目標字符串(可以看成字符的數(shù)組)或數(shù)組中與x相等的項的索引。2010-08-08