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 次浏览

启动您的职业生涯

完成课程获得认证

开始
广告