ES5 的 setter 和 getter

时间:2023-03-09 04:00:55
ES5 的 setter 和 getter

有两种方式使用 setter 和 getter

1. set/get

var person = {
_name: '',
get name() { return this._name },
set name(n) { this._name = n }
} // 测试
person.name // ''
person.name = 'john' // 'john', 此时 person._name 也变成了 'john'

2. Object.defineProperty

var person = {}
var name = ''
Object.defineProperty(person, 'name', {
configurable: true,
enumerable: true,
get: function() {
return name
},
set: function(n) {
name = n
}
}) // 测试
person.name // undefind
person.name = 'john' // 'john',此时全局的 name 也变成了 'john'

当然,通常用 setter 和 getter 来实现私有变量

// 私有变量
var person = function() {
var _name = ''
var _age = 0
return {
get name() { return _name },
set name(n) { _name = n },
get age() { return _age },
set age(a) { _age = a }
}
}()

或者

// 私有变量
var person = function() {
var _name = ''
var _age = 0
var obj = {}
Object.defineProperty(obj, 'name', {
configurable: true,
enumerable: true,
get: function() {
return _name
},
set: function(n) {
_name = n
}
})
Object.defineProperty(obj, 'age', {
configurable: true,
enumerable: true,
get: function() {
return _age
},
set: function(a) {
_age = a
}
})
return obj
}()

当然,setter 和 getter 最牛逼的用处是用来实现目前流行的 “双向绑定”,MVxx之类的库。不支持 setter 和 getter 的低版本浏览器则只能用轮询的方式来搞了。