getter & setter

ECMAScript 5:

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 //''

 person.name = 'john' // 'john'，此时全局的 name 也变成了 'john'

对于setter和getter的使用场景：

1.私有变量

 // 私有变量

 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

 }()

2.数据绑定（MVxx等框架的原理）

模板中每个指令/数据绑定都有一个对应的 watcher 对象，在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时，会触发 watcher 重新计算，也就会导致它的关联指令更新 DOM

贴一张vue的追踪数据的图：

巴特西

getter & setter

最新文章

热门文章