setter 和getter

最新推荐文章于 2022-04-11 14:39:31 发布

w_cyj

最新推荐文章于 2022-04-11 14:39:31 发布

阅读量100

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/w_cyj/article/details/107991759

版权

js 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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)