Js-set和get访问器属性

素颜马尾好姑娘i 2023-07-06 11:56 2阅读 0赞

# Ⅰ- 壹 - set和get访问器属性 #

## 一 什么是set和get ##

*  Getters和Setters使你可以快速获取或设置一个对象的数据。
 *  一个对象拥有两个方法，分别用于获取和设置某个值，
 *  你可以用它来隐藏那些不想让外界直接访问的属性。一个对象内，每个变量只能有一个getter或setter。（因此value可以有一个getter和一个setter，但是value绝没有两个getters）  
    删除getter或setter的唯一方法是：delete object\[name\]。delete可以删除一些常见的属性，getters和setters。
 *  和变量属性同等重要。存储值还能存储语句块，介于属性和方法的存在

set和get缺陷

只能处理值字符串，引用类型的类型不可以处理，同一引用地址，会认为值相同，不会发生改变

## 二 get和set的使用方法： ##

1.  get和set是方法，只有一个参数而且必须有一个，因为是方法，所以可以进行判断，
2.  get一般是要返回的；不允许有参数，而set是设置，不用返回
3.  如果调用对象内部的属性约定的命名方式是变量名前加\_ 临时变量. 一个临时变量有set和get
4.  如果仅有set,没有get，这个属性就是一个只写属性，不可以获取
5.  如果仅有get没有set，这个属性就是一个只读属性，不可以修改

## 三 在ES6中当做常量使用 ，在ES6中没有const这个变量，可以通过get ##

class Box{ 
        //static const EVENT_ ID="Event_ Id";
        constructor(){ 
        }
        static get EVENT_ ID(){ 
            return” EVENT_ID" ;
        }
    }
    
    cosnole.log(box.EVENT_ID);//只能获取不能设置

## 四 document中set个get,使用Object.definePreoperty(), ##

*  configurable，是否可删除属性并且是否可以重定义该属性的属性描述对象，默认值是false；
 *  enumerable，是否可以遍历，是否可枚举（该对象在使用for in遍历时，不可枚举属性是不能被遍历，也不能被Object.assign()复制），默认值是false；
 *  writable，是否可写，是否能够修改值，默认值是false；
 *  value，设置值；
 *  set:function()\{\}:设置属性 和value冲突 只能存在一个
 *  get:function()\{\}:获取属性，和writable冲突 只能存在一个

# Ⅱ - 贰 - 案例 #

## 一改变背景颜色和高度动画 ##

## 二 对象比较 ##

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) { 
                console.log(this.compareData(value, this._data))
              if(this.compareData(value, this._data))return;
              this.render();
              this._data = value;
            }
            get data() { 
              return this._data;
            }
            render() { }
            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;
            }
          }
    
          let b = new Box();
          b.data = { 
            a: 1,
            b: 2,
            c: { 
              a: 2,
              b: 5,
              d: { 
                a: 1,
                b: 2,
                c: [1, 2, 3],
              },
            },
          };