前言
Javascript賦予了函數非常多的特性，其中最重要的特性之一就是將函數作為第一型的對象。那就意味著在javascript中函數可以有屬性，可以有方法， 可以享有所有對象所擁有的特性。并且最重要的，她還可以直接被調用
我們簡單的試驗一下就可以發現
// 簡單實驗 函數作為對象的存在let fn = function () {}fn.prop = 'fnProp'console.log(fn.prop) // fnProp為函數添加屬性的這個特性我覺的大家在平時的開發中基本沒什么嘗試或者是使用過，但是在一些JS庫或者是事件回掉管理中都能發揮出很大的用處。下面一起來看幾個例子。
函數緩存
在某有一些的情況下我們可以要存儲一組相關但是相互又獨立的函數。這個需求看起來很easy，實現起來也不復雜。最顯而易見的做法是使用一個數組來保存所有的函數，
這樣不是不可以，但是顯然這種做法不是最好的。下面通過為函數屬性我們呢來實現這個我們的目的
// 1：函數緩存示例let store = {nextId: 1, // idcache: {}, // 緩存add (fn) {// 如果函數中沒有id屬性那么就緩存if (!fn.id) {console.log(`begin add func ${fn.name}`)fn.id = store.nextId ++// 設置完緩存之后返回truereturn !!(store.cache[fn.id] = fn)} else {console.log(`${fn.name} is already in cache`)}}}function storeCache() {}store.add(storeCache) // begin add func storeCachestore.add(storeCache) // storeCache is already in cache上面的這一段代碼邏輯清晰，store對象用來管理我們的緩存，cache屬性用來存儲函數，nextId屬性用來保存當前的緩存Id，add()方法用來設置存儲，先來判斷當前函數是否已經在緩存中然后再去設置緩存，這樣就能限制函數的重復添加，最后返回true。
!!構造是一種可以將任意Javascript表達式轉化為其等效布爾值的簡單方式。
緩存記憶函數
這種函數可以記住之前已經計算過的結果，避免了不必要的計算，這顯然是能夠提升代碼性能的。
在舉例之前我們先來看看這種方式的優缺點
優點
缺點
了解了優缺點我們來看一個簡單的計算素數的例子（不是很嚴謹）
// 2: 緩存記憶函數function isPrime (value) {if (!isPrime.anwers) isPrime.anwers = {}// 先從緩存里面取if (isPrime.anwers[value] != null ) {return isPrime.anwers[value]}// 開始進行判斷和計算let prime = value != 1for (let index = 2; index < value; index++) {if (value % index == 0) {prime = falsebreak;} }// 保存計算出來的值return isPrime.anwers[value] = prime}console.log(isPrime(5))console.log(`從函數記憶中直接讀取${isPrime.anwers[5]}`)這里呢 好處是特別明顯的我們再次的取用isPrime.anwers[5]的時候不需要經過任何的計算，但是大型的計算要主要內存的使用
緩存記憶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')) // HTMLCollectionconsole.log(getElements.cache['div']) // HTMLCollection這個函數和上面的緩存使用的同一個手法，而且這簡單的4句代碼能為我們的性能帶來大幅度的提升。這也算是一種超能力吧。函數的很多特性都和其上下文有關，接下來我們研究一個和上下文又換的例子。
偽造數組方法(上下文相關)
在一些情況下我們想創建一個包含一組數據的對象，但是這個數據包含很多的狀態，比如和集合項有關的元數據那么我們用數組來存就不太合適了。那么這里我們就用對象的方式來假扮數組。通過改變上下文來完成一些“不法的行為”
// 4：偽造數組方法// <input type="button" id="add" >// <input type="button" id="remove" >let elems = {length: 0, //為了保存個數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); // 2console.log(elems);/**0: input#add1: input#removeadd: ƒ add(elem)gather: ƒ gather(id)length: 2*/在我還對JS懵懵懂懂的時候看到這樣的操作被秀了一臉，簡直是刺激了我幼小的心靈。
我們在add函數中實現了把元素添加到了集合中，而且Array又正好提供push方法， 不用白不用。這種操作也是直白的展示了函數上下文的超強特性。
總結
Javascript強大的靈活性， 也帶來更多的可能性。 路漫漫其修遠兮，吾將上下而求索。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
