demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>defineProperty vs Proxy</title>
</head>
<body>
<script type="module">
/** defineProperty **/
let obj = {
name: '张三',
age: 20
};
for(let key in obj){
let value = obj[key];
Object.defineProperty(obj, key, {
configurable: true,
enumerable: true,
get(){
console.log('get');
return value;
},
set(newValue){
console.log('set');
value = newValue;
}
})
}
obj.name = '李四';
console.log(obj.name);
/** Proxy **/
let obj = {
name : '张三'
};
let newObj = new Proxy(obj, {
get(target, key){
console.log('get');
// return target[key];
return Reflect.get(target, key);
},
set(target, key, newValue){
console.log('set');
// target[key] = newValue;
// 严格模式下
return Reflect.set(target, key, newValue);
},
// 判断key值是否存在于对象中
has(target, key){
console.log('has');
return key in target;
}
});
newObj[name];
newObj.name = '李四';
console.log('name' in newObj);
</script>
</body>
</html>
