setter 和getter

setter 和getter

• set有且仅有一个参数

   set c(value) {
            document.documentElement.style.backgroundColor =
              "#" + value.toString(16);
            this._c = value;
          }
  

• get不允许有任何参数

  get c() {
            return this._c;
          },
        }
  

• 如果仅有set，没有get，这个属性就是只写属性

• 如果仅有get，没有set，这个属性就是一个只读属性

• 静态常量

     class Box{
         static  const EVENT_ID="Event_Id";
       //ES6中没有
            constructor(){
  
            }
            static get EVENT_ID(){
                return "EVENT_ID";
            }
        }
  
        console.log(Box.EVENT_ID);//只能读，不能设置
  

• 给对象追加属性

  var div = document.querySelector("div");
        /* div._width=0;
              Object.defineProperty(div,"width",{
                //给对象追加属性，configurable默认flase不可修改可不写，writable和value起冲突不写
                  enumerable:true,
                  set:function(_value){
                      this.style.width=_value.toString().indexOf("px")>-1 ? _value : _value+"px";
                      this._width=_value;
                  },
                  get:function(){
                      return this._width;
                  }
              });
  

• 设置多个属性

   Object.defineProperties(div, {
          _width: {
            writable: true,
            value: 0,
          },
          _height: {
            writable: true,
            value: 0,
          },
          _bgColor: {
            writable: true,
            value: 0,
          },
          width: {
            enumerable: true,
            set: function (_value) {
              this.style.width =
                _value.toString().indexOf("px") > -1 ? _value : _value + "px";
              this._width = _value;
            },
            get: function () {
              return this._width;
            },
          },
          height: {
            enumerable: true,
            set: function (_value) {
              this.style.height =
                _value.toString().indexOf("px") > -1 ? _value : _value + "px";
              this._height = _value;
            },
            get: function () {
              return this._height;
            },
          },
          bgColor: {
            enumerable: true,
            set: function (_value) {
              this.style.backgroundColor =
                typeof _value === "string"
                  ? _value
                  : "#" + _value.toString(16).padStart(6, "0");
              this._bgColor = _value;
            },
            get: function () {
              return this._bgColor;
            },
          },
        });
        
         setInterval(function(){
                  div.width++;
                  div.height++;
                  div.bgColor++;
              },100)