浅谈Object.defineProperty与Proxy的区别
程序员文章站
2022-07-12 21:54:54
...
Object.defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象,即返回的还是目标对象本身。
let obj = {
name: '测试',
age: 89
};
// 这个API没办法兼容 IE8
// Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
let p = Object.defineProperty(obj, 'name', {
value: '默认的', // 给 obj.name 赋值,没有默认是undefined
configurable: true, // 设置该属性是否可被删除 默认是false
enumerable: true, // 该属性是否可枚举 默认是false
writable: true, // 该属性是否可以进行赋值操作(更改value的值) 默认是false
});
// 返回的还是原来的对象(原来的堆地址)
console.log(p === obj); // true
let newVal = '';
// Object.defineProperty() 一次只能监听一个属性
Object.defineProperty(obj, 'sex', { // 如果监控对象没有改属性,则给对象加上
get(){
// 每当获取 obj.sex 值的时候会触发这个函数
// 获取到的值是 get 函数的返回值
console.log('get');
// return 'get'; // 记得要return
// 如果返回的是一个固定的值,那么obj.sex的值就一直是固定的,改不了
// 想要给 sex 动态赋值,需要借助第三方变量
return newVal;
},
set(val){
// 每当给 obj.sex 进行赋值的时候会触发这个函数,val是赋值的新值
console.log('set',val);
newVal = val;
// obj.sex = val; // 千万不能这样写,是死递归(一直在触发set函数)
}
});
console.log(obj.sex); // 获取的是 get函数返回值
Proxy
语法:const p = new Proxy(target, handler)
let obj2 = {
name: 'proxy',
age: 89,
sex: 11
};
let pp = new Proxy(obj2, {
// 凡是获取 pp 对象的任意一个属性值,都会触发这个函数
get(obj, key){
// obj就是被代理的对象 obj2;key是操作的属性名
// console.log(arguments);
// console.log(obj === obj2); // true
console.log(obj, key);
// 记得要return
return obj[key];
},
// 凡是给 pp 对象的任意一个属性进行赋值,都会触发这个函数
set(obj, key, newVal){
//
console.log('set');
obj[key] = newVal; // 这样写不会造成死递归的原因:代理的是整个对象(堆内存),只是改变其中的一个属性值,不会改变整个堆地址
}
});
// 返回的是一个新对象(跟原来的堆地址不一样),但是属性名跟目标对象obj的还是一样的
console.log(obj2 === pp); // false