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 的低版本浏览器则只能用轮询的方式来搞了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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