proxy 和 Object.defineProperty的对比
Object.defineProperty的缺点
- 无法监听数组的变化
- 只能监听已存在的属性,对于新增删除属性无能为力
语法
Object.defineProperty(obj, prop, desc)
//obj: 需要定义属性的当前对象
//prop: 当前需要定义的属性名
//desc: 对当前需要定义的属性的描述
proxy
- 可以监听数组的变化
- 监听对象本身,即:对象本身没有的属性也可以被监听
语法
const proxy = new Proxy(target,handler)
//target:当前对象
//handler:处理函数 对象
场景:分别使用proxy和defineProperty完善逻辑代码
function observe(obj, callback) {}
const obj = observe(
{
name: '子君',
sex: '男'
},
(key, value) => {
console.log(`属性[${key}]的值被修改为[${value}]`)
}
)
// 这段代码执行后,输出 属性[name]的值被修改为[妹纸]
obj.name = '妹纸'
// 这段代码执行后,输出 属性[sex]的值被修改为[女]
obj.sex = '女'
- 使用
Object.defineProperty
/**
* 请实现这个函数,使下面的代码逻辑正常运行
* @param {*} obj 对象
* @param {*} callback 回调函数
*/
function observe(obj, callback) {
const newObj = {}
Object.keys(obj).forEach(key => {
Object.defineProperty(newObj, key, {
configurable: true,
enumerable: true,
get() {
return obj[key]
},
// 当属性的值被修改时,会调用set,这时候就可以在set里面调用回调函数
set(newVal) {
obj[key] = newVal
callback(key, newVal)
}
})
})
return newObj
}
const obj = observe(
{
name: '子君',
sex: '男'
},
(key, value) => {
console.log(`属性[${key}]的值被修改为[${value}]`)
}
)
// 这段代码执行后,输出 属性[name]的值被修改为[妹纸]
obj.name = '妹纸'
// 这段代码执行后,输出 属性[sex]的值被修改为[女]
obj.name = '女'
2.使用proxy
function observe(obj, callback) {
return new Proxy(obj, {
get(target, key) {
return target[key]
},
set(target, key, value) {
target[key] = value
callback(key, value)
}
})
}
const obj = observe(
{
name: '子君',
sex: '男'
},
(key, value) => {
console.log(`属性[${key}]的值被修改为[${value}]`)
}
)
// 这段代码执行后,输出 属性[name]的值被修改为[妹纸]
obj.name = '妹纸'
// 这段代码执行后,输出 属性[sex]的值被修改为[女]
obj.name = '女'
原文地址::https://juejin.im/post/6861725116389130254