详解js中的get/set

详解js中的get/set

js对象有两种属性:

  • 数据属性:就是对象中的普通成员。
  • 存取属性:一组get/set函数,读取对象属性时调用get(不带参数,可以return),设置对象属性时调用set(set中return无效)。

如果对象内只声明了get,则get/set属性值只可读。
如果对象内只声明了set,则get/set属性值只可写且值永远为 undefined

get/set写法

1
2
3
4
5
6
7
8
9
10
11
// func是obj的存取属性名称
let obj = {
get func() {
// code
return;
},
set func(val) {
// code
}
};
console.log(obj.func);

实例

只声明get:

1
2
3
4
5
6
7
8
9
10
11
let obj = {
name: 'Mason',
age: 22,
get func() {
return this.name;
}
};

console.log(obj.func); // 'Mason'
obj.func = ''; // 这里无法修改func
obj.name = 'Jason'; // 修改成功

只声明set:

1
2
3
4
5
6
7
8
9
10
11
12
let obj = {
name: 'Mason',
age: 22,
set func(val) {
this.name = val;
}
};

console.log(obj.func); // undefined
obj.name = 'Jason'; // 修改成功
console.log(obj.func); //undefined
console.log(obj.name); // 'Jason'

同时声明:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let obj = {
name: 'Mason',
age: 22,
get func() {
return this.name;
},
set func(val) {
this.name = val;
}
};

console.log(obj.func); // 'Mason'
obj.func = ''; // 修改成功
console.log(obj.func); // ''

评论