|
Javascript中函數(shù)作為對象，Javascript賦予了函數(shù)非常多的特性，其中最重要的特性之一就是將函數(shù)作為第一型的對象。那就意味著在javascript中函數(shù)可以有屬性，可以有方法， 可以享有所有對象所擁有的特性。并且最重要的，她還可以直接被調(diào)用 我們簡單的試驗一下就可以發(fā)現(xiàn) // 簡單實驗 函數(shù)作為對象的存在 let fn = function () {} fn.prop = 'fnProp' console.log(fn.prop) // fnProp |
為函數(shù)添加屬性的這個特性我覺的大家在平時的開發(fā)中基本沒什么嘗試或者是使用過，但是在一些JS庫或者是事件回掉管理中都能發(fā)揮出很大的用處。下面一起來看幾個例子。 函數(shù)緩存 在某有一些的情況下我們可以要存儲一組相關(guān)但是相互又獨立的函數(shù)。這個需求看起來很easy，實現(xiàn)起來也不復雜。最顯而易見的做法是使用一個數(shù)組來保存所有的函數(shù)，
這樣不是不可以，但是顯然這種做法不是最好的。下面通過為函數(shù)屬性我們呢來實現(xiàn)這個我們的目的 // 1：函數(shù)緩存示例 let store = { nextId: 1, // id cache: {}, // 緩存 add (fn) { // 如果函數(shù)中沒有id屬性那么就緩存 if (!fn.id) { console.log(`begin add func ${fn.name}`) fn.id = store.nextId ++ // 設(shè)置完緩存之后返回true return !!(store.cache[fn.id] = fn) } else { console.log(`${fn.name} is already in cache`) } } } function storeCache() {} store.add(storeCache) // begin add func storeCache store.add(storeCache) // storeCache is already in cache |
上面的這一段代碼邏輯清晰，store對象用來管理我們的緩存，cache屬性用來存儲函數(shù)，nextId屬性用來保存當前的緩存Id，add()方法用來設(shè)置存儲，先來判斷當前函數(shù)是否已經(jīng)在緩存中然后再去設(shè)置緩存，這樣就能限制函數(shù)的重復添加，最后返回true。 !!構(gòu)造是一種可以將任意Javascript表達式轉(zhuǎn)化為其等效布爾值的簡單方式。 緩存記憶函數(shù) 這種函數(shù)可以記住之前已經(jīng)計算過的結(jié)果，避免了不必要的計算，這顯然是能夠提升代碼性能的。 在舉例之前我們先來看看這種方式的優(yōu)缺點 優(yōu)點 · 緩存了之前的結(jié)果，最終用戶享有性能優(yōu)勢 · 實際上是發(fā)生在幕后，操作無感 缺點 · 內(nèi)存的犧牲這是肯定的 · 打破了存粹性（一個函數(shù)或者方法應該只做好一件事） · 如果方法中有算法，那么很難測量這個算法的性能 了解了優(yōu)缺點我們來看一個簡單的計算素數(shù)的例子（不是很嚴謹） // 2: 緩存記憶函數(shù) function isPrime (value) { if (!isPrime.anwers) isPrime.anwers = {} // 先從緩存里面取 if (isPrime.anwers[value] != null ) { return isPrime.anwers[value] } // 開始進行判斷和計算 let prime = value != 1 for (let index = 2; index < value; index++) { if (value % index == 0) { prime = false break; } } // 保存計算出來的值 return isPrime.anwers[value] = prime } console.log(isPrime(5)) console.log(`從函數(shù)記憶中直接讀取${isPrime.anwers[5]}`) |
這里呢 好處是特別明顯的我們再次的取用isPrime.anwers[5]的時候不需要經(jīng)過任何的計算，但是大型的計算要主要內(nèi)存的使用 緩存記憶DOM元素 通過元素的標簽查詢DOM的操作的的代價是昂貴的，各位前端大佬肯定都很清楚。我們下面使用緩存記憶的方式來進行這個操作 // 3:緩存記憶DOM元素 function getElements (name) { if (!getElements.cache) getElements.cache = {} return getElements.cache[name] = getElements.cache[name] || document.getElementsByTagName(name); } console.log(getElements('div')) // HTMLCollection console.log(getElements.cache['div']) // HTMLCollection |
這個函數(shù)和上面的緩存使用的同一個手法，而且這簡單的4句代碼能為我們的性能帶來大幅度的提升。這也算是一種超能力吧。函數(shù)的很多特性都和其上下文有關(guān)，接下來我們研究一個和上下文又換的例子。 偽造數(shù)組方法(上下文相關(guān)) 在一些情況下我們想創(chuàng)建一個包含一組數(shù)據(jù)的對象，但是這個數(shù)據(jù)包含很多的狀態(tài)，比如和集合項有關(guān)的元數(shù)據(jù)那么我們用數(shù)組來存就不太合適了。那么這里我們就用對象的方式來假扮數(shù)組。通過改變上下文來完成一些“不法的行為” // 4：偽造數(shù)組方法 // <input type="button" id="add" > // <input type="button" id="remove" > let elems = { length: 0, //為了保存?zhèn)€數(shù) add (elem) { Array.prototype.push.call(this, elem) }, gather (id) { this.add(document.getElementById(id)) } } elems.gather('add') elems.gather('remove') console.log(elems[0]); // <input type="button" id="add" > console.log(elems[1]); // <input type="button" id="remove" > console.log(elems.length); // 2 console.log(elems); /** 0: input#add 1: input#remove add: ? add(elem) gather: ? gather(id) length: 2 */ |
在我還對JS懵懵懂懂的時候看到這樣的操作被秀了一臉，簡直是刺激了我幼小的心靈。 我們在add函數(shù)中實現(xiàn)了把元素添加到了集合中，而且Array又正好提供push方法， 不用白不用。這種操作也是直白的展示了函數(shù)上下文的超強特性。
|
