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 则为只读 ，不可写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

基本样式：

var obj={
	_age:10,
	set age(value){
		this._age=value;
	},
	get age(){
		return _age;
	}
}
1
2
3
4
5
6
7
8
9

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意

注意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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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;  
        },
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

数据驱动显示

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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38