ES5 的 setter 和 getter

有两种方式使用 setter 和 getter

 

1. set/get

1
2
3
4
5
6
7
8
9
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 来实现私有变量

1
2
3
4
5
6
7
8
9
10
11
// 私有变量
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 }
    }
}()

 

或者

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 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 的低版本浏览器则只能用轮询的方式来搞了。

 

posted on   snandy  阅读(3538)  评论(0编辑  收藏  举报

编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
历史上的今天:
2011-03-17 仅Chrome中函数实参与形参发生关联
2011-03-17 神奇的css属性pointer-events
< 2025年3月 >
23 24 25 26 27 28 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 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示