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

Posted 2022-08-11 勇敢*牛牛

setter与getter访问器属性

• Getters和Setters使你可以快速获取或设置一个对象的数据。
• 一个对象拥有两个方法，分别用于获取和设置某个值，你可以用它来隐藏那些不想让外界直接访问的属性。一个对象内，每个变量只能有一个getter或setter。（因此value可以有一个getter和一个setter，但是value绝没有两个getters）
• 删除getter或setter的唯一方法是：delete object[name]。delete可以删除一些常见的属性，getters和setters。
• 1、对数据的访问限制：a.value是对value变量的getter方法调用，如果在getter方法实现中抛出异常，可以阻止对value变量的访问
• 2、对dom变量进行监听：window.name是一个跨域非常好用的dom属性（大名鼎鼎，详见百度），如果覆盖window.name的setter实现则可以实现跨页面的内存异步通信

属性 值
方法 语句块

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

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

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

每个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

每个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);