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