Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
40 lines (29 sloc) 949 Bytes

观察者模式

当观察的数据对象发生变化时,自动调用相应函数。

方法一:Object.defineProperty

方法一: 使用 Object.defineProperty(obj, props, descriptor) 实现观察者模式, 其也是 vue 双向绑定 的核心,示例如下(当改变 obj 中的 value 的时候,自动调用相应相关函数):

var obj = {
  value: 0
}

Object.defineProperty(obj, 'value', {
  set(newValue) {
    console.log('调用相应函数')
  }
})

obj.value = 1 // 调用相应函数

方法二:Proxy

Proxy/Reflect 是 ES6 引入的新特性,也可以使用其完成观察者模式,示例如下(效果同上):

var obj = {
  value: 0
}

var proxy = new Proxy(obj, {
  set: function(target, key, value, receiver) {
    console.log('调用相应函数')
    Reflect.set(target, key, value, receiver)
  }
})

proxy.value = 1 // 调用相应函数