집 >웹 프론트엔드 >JS 튜토리얼 >Javascript의 getter 및 setter에 대한 기본 소개

Javascript의 getter 및 setter에 대한 기본 소개

巴扎黑원래의: 2017-08-18 10:52:561571검색

최근 직장에서 getter와 setter를 만났습니다. Getter는 속성 값을 얻는 방법이고, setter는 속성 값을 설정하는 방법입니다. 다음 글에서는 자바스크립트의 getter와 setter에 대한 관련 정보를 주로 소개하고 있으니, 필요한 친구들이 참고하면 좋을 것 같습니다.

머리말

이 글에서는 주로 Javascript의 getter 및 setter 관련 내용을 소개합니다. 제가 처음 접한 것은 vue.js의 데이터 바인딩이었습니다. 객체의 속성을 수정하면 DOM에 자동으로 피드백될 수 있는데, 이는 구현이 객체에 대한 getter 및 setter를 정의하고 이 두 속성의 사용법을 간단히 요약해 놓는다는 사실을 나중에 문서에서 봤습니다. .. 자세한 소개는 생략하겠습니다.

Principle

Object.defineProperty를 사용하여 객체 속성을 getter 및 setter로 다시 작성하고, 바인딩된 DOM 노드의 값을 getter 및 setter를 통해 변경합니다.

예

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 }]

이 MDN 예제를 사용하여 작은 메소드와 타이머 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>

를 작성했습니다.

위 내용은 Javascript의 getter 및 setter에 대한 기본 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript数组去重方法总结다음 기사：JavaScript实现进度条加载效果教程详解