suchen

Heim >Web-Frontend >js-Tutorial >Grundlegende Einführung in Getter und Setter in Javascript

Grundlegende Einführung in Getter und Setter in Javascript

巴扎黑
巴扎黑Original
2017-08-18 10:52:561573Durchsuche

Ich bin kürzlich bei der Arbeit auf Getter und Setter gestoßen. Getter sind eine Methode zum Abrufen von Attributwerten, und Setter sind eine Methode zum Festlegen von Attributwerten. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zu Gettern und Settern in Javascript ein. Freunde, die sie benötigen, können einen Blick darauf werfen.

Vorwort

Dieser Artikel führt Sie hauptsächlich in den zugehörigen Inhalt von Gettern und Settern in Javascript ein, als ich zum ersten Mal von dieser Sache hörte Datenbindung in vue.js. Solange die Daten gebunden sind, können geänderte Objekteigenschaften automatisch an das DOM zurückgegeben werden. Später habe ich auch gesehen, dass die Implementierung im Dokument Getter und Setter für das Objekt definiert überschreibt einfach die Verwendung dieser beiden. Ich werde im Folgenden nicht viel sagen, werfen wir einen Blick auf die detaillierte Einführung.

Prinzip

Verwenden Sie Object.defineProperty, um Objekteigenschaften als Getter und Setter umzuschreiben und die Bindung von DOM-Knoten durch Getter und Setter zu ändern. Werte

Beispiel

Aus MDN entnommen


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

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

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

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

Verwenden Sie dieses MDN Beispiel: Ich habe eine kleine Methode und eine Timer-DEMO geschrieben


<!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>

Das obige ist der detaillierte Inhalt vonGrundlegende Einführung in Getter und Setter in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript数组去重方法总结Nächster Artikel：JavaScript实现进度条加载效果教程详解

In Verbindung stehende Artikel

Mehr sehen