监听一个变量的变化,当变量变化时执行某些操作,这类似现在流行的前端框架(例如 React、Vue等)中的数据绑定功能,在数据更新时自动更新 DOM 渲染,那么如何实现数据绑定喃?
本文给出两种思路:
- ES5 的 Object.defineProperty
- ES6 的 Proxy
ES5 的 Object.defineProperty
Object.defineProperty()
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象——MDN
Object.defineProperty(obj, prop, descriptor)
其中:
obj
: 要定义属性的对象prop
:要定义或修改的属性的名称或Symbol
descriptor
:要定义或修改的属性描述符
var user = {
name: 'sisterAn'
}
Object.defineProperty(user, 'name', {
enumerable: true,
configurable:true,
set: function(newVal) {
this._name = newVal
console.log('set: ' + this._name)
},
get: function() {
console.log('get: ' + this._name)
return this._name
}
})
user.name = 'an' // set: an
console.log(user.name) // get: an
如果是完整的对变量的每一个子属性进行监听:
// 监视对象
function observe(obj) {
// 遍历对象,使用 get/set 重新定义对象的每个属性值
Object.keys(obj).map(key => {
defineReactive(obj, key, obj[key])
})
}
function defineReactive(obj, k, v) {
// 递归子属性
if (typeof(v) === 'object') observe(v)
// 重定义 get/set
Object.defineProperty(obj, k, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
console.log('get: ' + v)
return v
},
// 重新设置值时,触发收集器的通知机制
set: function reactiveSetter(newV) {
console.log('set: '