set、get(描述对象的第二种写法)

描述对象的第二种写法

set get基础

ES6中没有静态常量
static const EVENT_ID=“Event_Id”;

var obj={
    a:1,
    _c:0,
    b:function(){

    },
    set有且只有一个参数，而且必须要有参数，参数就是要赋予的值
    set c(value){
        this._c就是一个临时存储的变量。
        this._c=value;
    },
    get中不允许有任何参数
    get c(){
        return this._c;
    }
}
obj.c=10;  //当对值改变或者赋值时会调用set方法
console.log(obj.c)  //当获取值时会调用get方法

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

ES6中定义一个静态常量的方法

由于ES6的类中不能定义静态常量：static const EVENT_ID=“Event_Id”;会报错，所以利用get定义静态方法的方式定义一个静态的方法，后通过类名.方法名就可以获取里面返回的值。

class Box{
    constructor(){

        }
    static get EVENT_ID(){
    return "EVENT_ID";
    }  
}
console.log(Box.EVENT_ID);

利用set和get创建一个不断变化的方块

 Object.defineProperties(div, {
        this为div
        _width: {
          writable: true,
          value: 0,
        },
        _height: {
          writable: true,
          value: 0,
        },
        _bgColor: {
          writable: true,
          value: 0,
        },
        width: {
            //这里采用的是描述对象的第二种写法
          enumerable: true,
          set: function (_value) {
              //在描述对象外对width的值改变的时候，就会进来该set函数，由于传进来的大部分是Number类型，所以要转字符串。
            this.style.width =
              _value.toString().indexOf("px") > -1 ? _value : _value + "px";
              并把作为临时存储的变量_width赋值为执行set时传进来的参数。
            this._width = _value;
          },
          //在需要获取值的时候就会执行get函数里面的内容
          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.width=div.width+1 //这里就相当于又变化了，又赋值了，所以利用了set改变值，get获取值
                div.height++;   
                div.bgColor++;
            },16)

利用set和get创建小球

  import Utils from "./js/Utils.js";
    var div=document.querySelector("div");

    var obj={
        _arr:[],  //临时存放数组内容的变量
        set arr(value){
          //判断传进来的value如果不是数组类型便直接跳出
            if(!Array.isArray(value)) return;
            //判断判断上次改变过后的数组内容与这次传进来的数组是否一样
            //如果一样便不需要重新执行一遍函数了，
            //如果不一样则重新根据数组的内容创建小球。
            console.log(this._arr,value);
            if(this._arr.join()===value.join())return;
            div.innerHTML="";
            for(var i=0;i<value.length;i++){
               let ball=Utils.ce("div",{  //设计小球的样式
                    width:"50px",
                    height:"50px",
                    backgroundColor:"red",
                    color:"#FFFFFF",
                    textAlign:"center",
                    lineHeight:"50px",
                    borderRadius:"50px",
                    float:"left"
                },div);
                ball.textContent=value[i];  //给小球编号
            }
            this._arr=value;  //给定义的临时存储数组的变量赋值当前的value。
        },

        get arr(){
            return this._arr; //向外返回存储的value数组
        }
    }
    var a=[]; //用来改变obj.arr数组的新数组
    var t=0;  //改变的序号
   setInterval(animation,2000);

   function animation(){
      t++;
      a.push(t);
      obj.arr=a.slice();
   }

对象的深判断

class Box {
        _data = {
          a: 1,
          b: 2,
          c: {
            a: 2,
            b: 5,
            d: {
              a: 1,
              b: 2,
              c: [1, 2, 3],
            },
          },
        };
        constructor() {}
        set data(value) {
            //执行判断的函数，两个参数分别是传进来的对象和类中的对象
          if(this.compareData(value, this._data))return;
          this.render();
          this._data = value;
        }
        get data() {
          return this._data;
        }
        render() {}
        /* 
        首先比较第一层的，第一层的非对象类型的元素，如果不一样，就直接返回false，证明两个数组不一样，
        如果第一层存在对象类型的元素，则把这个对象元素对象当做两个参数，递归执行函数，判断下一层元素是否相等，
        如果每一层都顺利执行了，到最后都没有遇到return，证明两个对象确实是相等的，直接返回true即可。
        */
        compareData(target, source) {
          for (var prop in target) {
            if (typeof target[prop] === "object" && target[prop] !== null) {
              return this.compareData(target[prop], source[prop]);
            } else {
              if (target[prop] !== source[prop]) return false;
            }
          }
          return true;
        }
      }


        //赋值b.data为一个对象，和类中存储的对象判断是否相等(多层都要判断是否相等)
      let b = new Box();
      b.data = {
        a: 1,
        b: 2,
        c: {
          a: 2,
          b: 5,
          d: {
            a: 1,
            b: 2,
            c: [1, 2, 3],
          },
        },
      };