摘要:賦予了函數非常多的特性,其中最重要的特性之一就是將函數作為第一型的對象。那就意味著在中函數可以有屬性,可以有方法,可以享有所有對象所擁有的特性。參考資料忍者秘籍關于函數我之前還寫過一篇中高階函數的魅力有興趣的話可以看一看。
Javascript賦予了函數非常多的特性,其中最重要的特性之一就是將函數作為第一型的對象。那就意味著在javascript中函數可以有屬性,可以有方法, 可以享有所有對象所擁有的特性。并且最重要的,她還可以直接被調用
我們簡單的試驗一下就可以發現
// 簡單實驗 函數作為對象的存在 let fn = function () {} fn.prop = "fnProp" console.log(fn.prop) // fnProp
為函數添加屬性的這個特性我覺的大家在平時的開發中基本沒什么嘗試或者是使用過,但是在一些JS庫或者是事件回掉管理中都能發揮出很大的用處。下面一起來看幾個例子。
函數緩存在某有一些的情況下我們可以要存儲一組相關但是相互又獨立的函數。這個需求看起來很easy,實現起來也不復雜。最顯而易見的做法是使用一個數組來保存所有的函數,
這樣不是不可以,但是顯然這種做法不是最好的。下面通過為函數屬性我們呢來實現這個我們的目的
// 1:函數緩存示例 let store = { nextId: 1, // id cache: {}, // 緩存 add (fn) { // 如果函數中沒有id屬性那么就緩存 if (!fn.id) { console.log(`begin add func ${fn.name}`) fn.id = store.nextId ++ // 設置完緩存之后返回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屬性用來存儲函數,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 != 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(`從函數記憶中直接讀取${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")) // HTMLCollection console.log(getElements.cache["div"]) // HTMLCollection
這個函數和上面的緩存使用的同一個手法,而且這簡單的4句代碼能為我們的性能帶來大幅度的提升。這也算是一種超能力吧。函數的很多特性都和其上下文有關,接下來我們研究一個和上下文又換的例子。
偽造數組方法(上下文相關)在一些情況下我們想創建一個包含一組數據的對象,但是這個數據包含很多的狀態,比如和集合項有關的元數據那么我們用數組來存就不太合適了。那么這里我們就用對象的方式來假扮數組。通過改變上下文來完成一些“不法的行為”
// 4:偽造數組方法 // // 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]); // console.log(elems[1]); // console.log(elems.length); // 2 console.log(elems); /** 0: input#add 1: input#remove add: ? add(elem) gather: ? gather(id) length: 2 */
在我還對JS懵懵懂懂的時候看到這樣的操作被秀了一臉,簡直是刺激了我幼小的心靈。
我們在add函數中實現了把元素添加到了集合中,而且Array又正好提供push方法, 不用白不用。這種操作也是直白的展示了函數上下文的超強特性。
總結Javascript強大的靈活性, 也帶來更多的可能性。 路漫漫其修遠兮,吾將上下而求索。
參考資料: 《JavaScript忍者秘籍》
關于函數我之前還寫過一篇JavaScript中高階函數的魅力, 有興趣的話可以看一看。
代碼地址
原文地址 如果覺得有幫助的得話給個?吧
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103365.html
摘要:上傳進度下面通過高階函數的方式我們來實現函數節流節流函數計時器是否是第一次調用首次調用直接放行存在計時器就攔截設置使用節流分時函數節流函數為我們提供了一種限制函數被頻繁調用的解決方案。 高階函數是指至少滿足下列條件之一的函數 1:函數可以作為參數被傳遞 2:函數可以作為返回值輸出 JavaScript語言中的函數顯然的是滿足了高階函數的條件,下面我們一起來探尋JavaScript種高階...
摘要:前言由于最近的項目用到了一些的代碼,所以我帶著好奇心,認真閱讀了這本書,粗略地了解語言的基本結構和特性,對于一些不熟悉的新概念,以記錄的形式加強印象,也是對學習的反思總結。 前言 由于最近的項目用到了一些js的代碼,所以我帶著好奇心,認真閱讀了這本書,粗略地了解js語言的基本結構和特性,對于一些不熟悉的新概念,以記錄的形式加強印象,也是對學習的反思總結。 一、字面量(literals...
摘要:,微軟發布,同時發布了,該語言模仿同年發布的。,公司在瀏覽器對抗中沒落,將提交給國際標準化組織,希望能夠成為國際標準,以此抵抗微軟。同時將標準的設想定名為和兩類。,尤雨溪發布項目。,正式發布,并且更名為。,發布,模塊系統得到廣泛的使用。 前言 作為程序員,技術的落實與鞏固是必要的,因此想到寫個系列,名為 why what or how 每篇文章試圖解釋清楚一個問題。 這次的 why w...
摘要:今天這篇文章主要介紹函數式編程的思想。函數式編程通過最小化變化使得代碼更易理解。在函數式編程里面,組合是一個非常非常非常重要的思想。可以看到函數式編程在開發中具有聲明模式。而函數式編程旨在盡可能的提高代碼的無狀態性和不變性。 最開始接觸函數式編程的時候是在小米工作的時候,那個時候看老大以前寫的代碼各種 compose,然后一些 ramda 的一些工具函數,看著很吃力,然后極力吐槽函數式...
閱讀 2591·2021-11-18 10:02
閱讀 2627·2021-11-15 11:38
閱讀 3697·2021-11-12 10:36
閱讀 696·2021-11-12 10:34
閱讀 2888·2021-10-21 09:38
閱讀 1479·2021-09-29 09:48
閱讀 1492·2021-09-29 09:34
閱讀 1088·2021-09-22 10:02