Introduction de base aux getters et setters en Javascript-js tutoriel-php.cn

Introduction de base aux getters et setters en Javascript

巴扎黑

Libérer： 2017-08-18 10:52:56

original

1530 Les gens l'ont consulté

J'ai récemment rencontré des getters et des setters au travail. Les getters sont une méthode pour obtenir des valeurs d'attribut, et les setters sont une méthode pour définir des valeurs d'attribut. L'article suivant vous présente principalement les informations pertinentes sur les getters et les setters en Javascript. Les amis qui en ont besoin peuvent s'y référer.

Préface

Cet article vous présente principalement le contenu associé aux getters et setters en Javascript. Quand j'ai entendu parler de cette chose pour la première fois, c'est. liaison de données dans vue.js. Tant que les données sont liées, les propriétés de l'objet modifiées peuvent être automatiquement renvoyées au dom. Plus tard, j'ai également vu que l'implémentation dans le document définit des getters et des setters pour l'objet et. écrase les propriétés d'origine. Résumons simplement l'utilisation de ces deux-là. Je ne dirai pas grand-chose ci-dessous.

Principe

Utilisez Object.defineProperty pour réécrire les propriétés des objets en tant que getters et setters, et modifiez la liaison des nœuds DOM via des getters et des setters. Valeurs

Exemple

Extrait de MDN

function Archiver() {
 var temperature = null;
 var archive = [];

 Object.defineProperty(this, &#39;temperature&#39;, {
  get: function() {
   console.log(&#39;get!&#39;);
   return temperature;
  },
  set: function(value) {
   temperature = value;
   archive.push({ val: temperature });
  }
 });

 this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // &#39;get!&#39;
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

Copier après la connexion

Utiliser ce MDN exemple j'ai écrit une petite méthode et une minuterie DEMO

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1 id="testTime" z:bind="time">0s</h1>
<script>

  // 双向绑定
  function bind_data(ele, arg){
    var bindAttributeName = &#39;z:bind&#39;;
    var data = JSON.parse(JSON.stringify(arg)) || {};
    Object.keys(arg).forEach(function(argKey, index, array){
      Object.defineProperty(arg, argKey, {
        get: function(){
          return data[argKey];
        },
        set: function(value){
          if(ele.getAttribute(bindAttributeName) !== argKey) {
            return;
          }
          if(ele.tagName === &#39;INPUT&#39;){
            ele.value = value;
          }else{
            ele.innerHTML = value;
          }
          data[argKey] = value;
        }
      });
      arg[argKey] = arg[argKey];
    });
    var key = ele.getAttribute(bindAttributeName);
    if((ele.tagName === &#39;INPUT&#39; || ele.tagName === &#39;TEXTAREA&#39;) && arg[key]){
      ele.addEventListener(&#39;input&#39;, function(e){
        data[key] = ele.value;
      });
    }
  }


  /*
  例子很简单，直接改变对象属性，就直接
  反馈到了DOM上，就好像是一个钩子，改变
  这个对象的属性，这个属性的钩子把它绑
  定的DOM的数据进行修改
   */ 
  var start = (new Date()).getTime();
  var now;
  var b = {time: &#39;0s&#39;};
  bind_data(document.getElementById(&#39;testTime&#39;), b);
  setInterval(function(){
    var now = (new Date()).getTime();
    b.time = ((now - start)/1000) + &#39;s&#39;
  }, 1);

</script>
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!