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。
資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP