setter与getter访问器属性——数据驱动显示

属性 值
方法 语句块

属性可以用来获取，存储值
方法可以用来执行多个语句块内容，实现某个功能

可以综合属性和方法特征的实现方式就是访问器属性

setter  设置值，并且执行语句块,
set属性必须包含一个参数，且仅有一个参数
使用 set 属性名(value){

}
getter  获取值，并且执行语句块
get必须使用一个无参数的方法，并且必须返回一个值
get 属性名(){
  return 属性值
}

set 和 get设置的属性名必须相同

set和get并不能直接存储值，需要借助一个第三个临时变量来存储这个值
并且这个临时变量尽量不暴露出现

如果只设置set，不设置get 则为只写，不可读
如果只设置get，不设置set

基本样式：

var obj={
  _age:10,
  set age(value){
    this._age=value;
  },
  get age(){
    return _age;
  }
}

每个setter设置一个属性的时，必须有一个参数value，并且，我们需要用一个外部变量来接收这个参数，用于保存。因此setter写法基本固定于

set 属性名(value){
    存储用的内部属性名=value；
    。。。。当设置这个属性后随之需要的操作
}

s = {
    _a:0,
    set a(value){
        this._a = value
    },
    get a(){
        return this._a
    }
}
s.a = 3
console.log(s.a);//3

每个getter是获取一个属性，因此，必须有一个return返回内部存储的值

get 属性名(){
        。。。当获取这个属性时需要操作的内容
     return 内部存储的这个属性；
}

s = {
    _a:0,
    set a(value){
        this._a = value
    },
    get a(){
        return this._a
    }
}
s.a = 3
console.log(s.a);//3

注意

注意setter和getter设置的属性一般是成对出现，对应的相应属性。
如果仅出现set，没有使用get，表示该属性只写，不能获取，如果仅出现get没有出现set，表示该属性只读，不可写值。
最后说明，setter和getter虽然很好用，但是目前ie不支持，使用的时候要注意。

其他写法：

var o = {
    a:1,
    b:2,
    _step:1,
}
Object.defineProperty(o,"_step",{
    enumerable:false,
    writable:true,
    value:1
})
console.log(o);
Object.defineProperty(o,"step",{
    get(){
        return this._step;
    },
    set(value){
        this._step = value;
    }
})
o.step = 10
console.log(o.step);//10

var o = {}
Object.defineProperties(o,{

    _data:{
        enumerable:true,//可枚举
        configurable:false,//不可删除
        writable:true,
        value:1
    },
    updata:{
        enumerable:false,
        set(value){
            this._data = value;
        },
        get(){
          return this._data;  
        },
    }
})

var div=document.querySelector("div");
Object.defineProperties(div,{
    _x:{
        writable:true,
        value:0
    },
    _y:{
        writable:true,
        value:0
    },
    x:{
        enumerable:true,
        set(value){
            value=~~value;
            this._x=value;
            this.style.left=value+"px";
        },
        get(){
            return this._x;
        }
    },
    y:{
        enumerable:true,
        set(value){
            value=~~value;
            this._y=value;
            this.style.top=value+"px";
        },
        get(){
            return this._y;
        }
    }
})

setInterval(function(){
    div.x++;
    div.y++;
},16);