<font id="tbtdb"></font>

        <sub id="tbtdb"><delect id="tbtdb"></delect></sub>

          <progress id="tbtdb"></progress>
          <address id="tbtdb"></address><thead id="tbtdb"></thead>
          <font id="tbtdb"></font>

          <meter id="tbtdb"><cite id="tbtdb"><dl id="tbtdb"></dl></cite></meter>

          好程序員-千鋒教育旗下高端IT職業教育品牌

          400-811-9990
          我的賬戶
          好程序員

          專注高端IT職業培訓

          親愛的猿猿,歡迎!

          已有賬號,請

          如尚未注冊?

          [HTML5] 好程序員web前端培訓分享Javascript中函數作為對象

          [復制鏈接]
          821 0
          葉子老師 發表于 2019-8-6 16:52:32 | 只看該作者 |閱讀模式 打印 上一主題 下一主題
            好程序員web前端培訓分享Javascript中函數作為對象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:偽造數組方法
          // <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); // 2
          console.log(elems);
          /**
          0: input#add
          1: input#remove
          add: ? add(elem)
          gather: ? gather(id)
          length: 2
          */

          我們在add函數中實現了把元素添加到了集合中,而且Array又正好提供push方法, 不用白不用。這種操作也是直白的展示了函數上下文的超強特性。
          好程序員web前端培訓官網:http://www.xn122.com/html5_class.shtml

          精彩內容,一鍵分享給更多人!
          收藏
          收藏0
          轉播
          轉播
          分享
          淘帖0
          支持
          支持0
          反對
          反對0
          回復

          使用道具 舉報

          您需要登錄后才可以回帖

          本版積分規則

          關注我們
          好程序員
          千鋒好程序員

          北京校區(總部):北京市海淀區寶盛北里西區28號中關村智誠科創大廈

          深圳西部硅谷校區:深圳市寶安區寶安大道5010號深圳西部硅谷B座A區605-619

          杭州龍馳智慧谷校區:浙江省杭州市下沙經濟技術開發區元成路199號龍馳智慧谷B座7層

          鄭州校區:鄭州市二七區航海中路60號海為科技園C區10層、12層

          Copyright 2007-2019 北京千鋒互聯科技有限公司 .All Right

          京ICP備12003911號-5 京公安網11010802011455號

          請您保持通訊暢通1對1咨詢馬上開啟

          电影韩国三级2019在线观看