JavaScript 中的智慧/自覆蓋/惰性 getter?


在本教程中,讓我們討論 JavaScript 中的智慧、自覆蓋或惰性 getter。

getter 將物件的屬性繫結到一個函式,但 getter 不會計算屬性值,直到我們訪問它。

當我們需要獲取一些動態值而無需顯式呼叫時,getter 會很有幫助。

使用者可以按照以下語法使用 getter。

語法

{ get prop() {} }
{ get [exp]() {} }

prop 和 exp 是繫結到函式的物件的屬性。'prop' 是一個簡單的物件屬性,而 'exp' 是一個表示式。

規則

  • getter 可以是字串或數字。

  • 不要宣告任何引數。

  • 重複的 getter 無效。

  • 不應將 getter 分配給物件的鍵。

惰性 getter 延遲了物件屬性的計算時間。它們訪問屬性,計算它,然後將其儲存在快取中以供後續使用。因為它們不會在以後重新計算屬性,所以我們稱它們為智慧 getter。

惰性 getter 的記憶方法充分利用了時間和空間。它提供了更快的程式碼。

用途

  • 最佳化 CPU 或 RAM 時間、遠端檔案訪問、加密雜湊解碼等情況。

  • 僅在稍後使用該值。

  • 避免重新計算過程。

現在讓我們討論惰性 getter 訪問值的方法。

使用通用物件訪問

使用者可以按照以下語法使用通用物件訪問方法使用惰性 getter。

語法

const objLazy ={
   get lazyfunction(){
   delete this.lazyfunction;
   return this.lazyfunction = value;
   },
}
objLazy.lazyfunction;

語法中的物件包含一個返回某個值的 getter 函式。

示例

該程式定義了一個具有惰性 getter 的物件,即使在刪除它之後也能記住它。將 delete 關鍵字應用於 getter 以將其刪除,然後使用相同的 getter 獲取 DOM 值。

<html> <body> <h2> Illustrating the lazy-getter memorization</h2> <p id="lazyGtrDomInp"> </p> <div id="lazyGtrDomBtnWrap"> <button id="lazyGtrDomBtn"> Go Lazy </button> </div> <br> <br> <p id="lazyGtrDomOut"></p> <script> var lazyGtrDomBtn = document.getElementById("lazyGtrDomBtn"); var lazyGtrDomBtnWrap = document.getElementById("lazyGtrDomBtnWrap"); var lazyGtrDomInp = document.getElementById("lazyGtrDomInp"); var lazyGtrDomOut = document.getElementById("lazyGtrDomOut"); lazyGtrDomInp.innerHTML = "<b>Input = </b>" + new Date(); lazyGtrDomBtn.onclick = function() { const objLazy = { get lazyfunction() { delete this.lazyfunction; return this.lazyfunction = lazyGtrDomInp.innerHTML; }, } lazyGtrDomOut.innerHTML = "<b>The deleted lazy getter function access DOM content </b><br><br>" + objLazy.lazyfunction; }; </script> </body> </html>

使用類使用惰性 getter

使用者可以按照以下語法使用此方法使用惰性 getter。

語法

class lazyClass{
   get lazyClassGetter(){
      delete this.constructor.prototype.lazyClassGetter;
      return this.constructor.prototype.lazyClassGetter = value;
   }
}
var lazyClsObj = new lazyClass();
lazyClsObj.lazyClassGetter

語法中的類包含一個返回某個值並使用類物件訪問此惰性 getter 的 getter 函式。

示例

該程式定義了一個具有惰性 getter 函式的類。使用建構函式語法刪除此 getter,然後分配一個值。透過建立類物件訪問惰性 getter。

<html> <body> <h2> Illustrating the lazy-getter using a class </h2> <p id="lazyGtrClsInp"></p> <div id="lazyGtrClsBtnWrap"> <button id="lazyGtrClsBtn"> Lazy Assign </button> </div> <br> <br> <p id="lazyGtrClsOut"></p> <script> var lazyGtrClsBtn = document.getElementById("lazyGtrClsBtn"); var lazyGtrClsBtnWrap = document.getElementById("lazyGtrClsBtnWrap"); var lazyGtrClsInp = document.getElementById("lazyGtrClsInp"); var lazyGtrClsOut = document.getElementById("lazyGtrClsOut"); lazyGtrClsInp.innerHTML = "<b>Lazy getter input = 10</b>"; lazyGtrClsBtn.onclick = function() { class lazyClass { get lazyClassGetter() { delete this.constructor.prototype.lazyClassGetter; return this.constructor.prototype.lazyClassGetter = 10; } } var lazyClsObj = new lazyClass(); lazyClsObj.lazyClassGetter lazyGtrClsOut.innerHTML = "<b>The deleted lazy getter function assigns a value </b><br><br>" + lazyClsObj.lazyClassGetter; }; </script> </body> </html>

本教程教我們如何使用惰性 getter。使用者可以在需要時間和記憶體效率的情況下使用惰性 getter。

更新於: 2022-11-15

511 次瀏覽

啟動你的 職業生涯

透過完成課程獲得認證

開始
廣告

© . All rights reserved.