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 }
    }
}()

OR

// 私有变量
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的追踪数据的图：