在寫一些函式庫時常會用到樹狀結構的數據,而且有些樹狀結構的資料對從根到葉的路徑取得需求非常高。例如一個網站的整個路由表就是一棵這樣的樹,它的「路徑」其實就是 URL 中的 path 部分。所以我好幾次都用了喪心病狂的陣列繼承去實現,下面跟大家分享下。
在 JavaScript 中,陣列也屬於 Object 的一種,它也可以繼承。任何兩個物件本身就可以有繼承關係,數組也不例外。於是我們讓一個樹的任何節點都是數組,它只維護自己下標最大的那個元素的值。其它元素的值是透過原型繼承從祖先節點繼承而來。這樣我們就可以像操作一般數組一樣在葉節點上存取從根節點過來的路徑了。下面是一個簡易實作:
運行
<script> // 定义节点类 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; }; // 使用节点造出一棵简单的树 var root = new TNode('root'); var a = root.createChild('a'); var b = a.createChild('b'); // 将叶节点视为数组,直接得到路径 document.write(b.join('/')); <!-- root/a/b </script>
這個用法算是比較黑的魔法,如果不懂原型繼承的原理可能很難看懂。所以如果只是作為一個庫的實現也許可以這麼寫(我已經用過好多次了,事實證明並沒有坑),但直接在業務代碼中如果這麼用就可能被吐槽到死。雖然這個用法並沒有違背 JavaScript 這種語言的核心思想。
這個用法的一個特點就是祖先節點的值更新時會自動同步到所有子節點上。雖然原型鏈存取也存在效能開銷,但比起在程式碼層自己去遍歷樹已經是快得不能再多了。當然如果沒有這樣的需求,只是想實現一棵簡簡單單的數字還是使用傳統方式比較好。畢竟這太依賴語言了,以後如果要遷移到別的程式語言可能會比較困難。