getter & setter
利用 getter/setter 可以操作对象的,在设置前或前做一些事情。
get语法将对象绑定到该时将被的。(MDN)
// 语法
var 对象 = {
get 名() {
// 做一些事情 balabala
return 值;
}
};
getter 在时被,同时返回 getter 的返回值。
const student = {
: {
english: ,
chinese: ,
math: ,
},
// 总分 通过计算得出
get total() {
var = this.;
return .english + .chinese + .math;
}
};
console.log(student.total); // 115
访问 student.total
,实际上时访问了 total
这个 getter
,getter
本质上是个,所以可以像写一样写 getter
,最后返回 getter
的返回值作为访问的值。
需要注意的是,没有特殊情况,不要在 getter 中访问自身。
var obj = {
key: ,
get key() {
return this.key;
},
}
这样会导致无限访问 key
这个 getter
。
当尝试设置时,set语法将对象绑定到要的。(MDN)
// 语法
var 对象 = {
set 名(值) {
// 做一些事情 balabala
// this.某个 = 值;
}
};
setter 在被赋值时,同时这个值会被作为参数传递给 setter。
const student = {
: {
english: ,
chinese: ,
math: ,
},
// 总分 通过计算得出
get total() {
var = this.;
return .english + .chinese + .math;
},
set english(value) {
this..english = value;
},
set chinese(value) {
this..chinese = value;
},
set math(value) {
this..math = value;
},
};
console.log(student);
student.math = ;
student.chinese = ;
student.english = ;
console.log(student);
console.log(student.total);
这里通过三个 setter
来设定对应的分数,这样就不用使用 student..学科
的方式赋值了,可以省略 。
和 getter
同理,使用 setter 时,setter
名和最终要设置值的不应同名,否则会无限设置这个值。
利用 defineProperty
也可以设置 setter/getter
。
var person = {
_cash: ,
_deposit: ,
};
Object.defineProperty(person, 'money', {
get: function() {
return this._cash + this._deposit;
},
});
Object.defineProperty(person, 'cash', {
set: function(val) {
console.log('现金发生了改变');
this._cash = val;
},
});
person.cash = ;
console.log(person.money);
getter/setter 可以充当器的角色,在设置和访问的时候做一些额外的事情。
灵活使用 getter/setter 可以使开发变得更有效率,许多框架的核心机制就是灵活、巧妙的使用了 getter/setter
。
getter/setter 是 ES5
中的特性,所以要注意 IE8 并。