JS中setter和getter的使用

setter和getter

setter和getter是介于变量和函数之间的第三者，他既可以存储变量，也可以执行函数。

var obj = {
            a:1,
            _c:0,//用临时变量存储值
            b:function(){

            },
            set c(value){//有且仅有一个参数 
                this._c=value;
            },
            get c(){//不允许有任何参数
                return this._c;
            }
        }
        obj.c = 10;//以属性为值使用 设置用set
        console.log(obj.c)//获取用get

set可以直接修改变量，有且仅有一个参数，参数就是你外部修改时传进来的值，他被放在一个临时变量里存储，这个临时变量一般不会暴露在外部中，只要当你的这个值发生改变，他就会自动调用set中的函数，所以可以在set中写入函数来方便我们的使用。如果一个对象中只写入了set方法，那么这个值就是只写属性，无法获取。

get可以直接获取这个变量值，从临时变量中取出这个值，get方法不允许写入任何参数。如果一个对象中仅有get方法时，那么这个属性就相当于一个只读属性。

set和get使用时就相当于对象中的属性一样，可以直接调用使用。

set和get的主要缺点就是当使用一个数组或者对象来作为临时变量时，当数组和对象中的内容改变但是引用地址没有发生变化时，set不会执行，set认为你这个引用地址没有变化，所以即使你内容变化了也无法触发set的函数，此时只能外部定义一个新的数组或者对象每次传进来修改这个变量的引用地址才可以执行set。

set和get虽然很好用，但是它有兼容问题，他只支持现代浏览器，意思就是目前ie不支持，使用的时候要注意。

var div=document.querySelector("div");
var obj={
      _arr:[],//数组作为临时变量
      set arr(value){
      if(!Array.isArray(value)) return;
       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;
            },
            get arr(){
                return this._arr;
            }
        }
        var a=[];
        var t=0;
       setInterval(animation,2000);

       function animation(){
          t++;
          a.push(t);
          obj.arr=a;//必须重新赋值才能触发set直接给arr添加是没有用的
       }