注释很详细,直接上代码
涉及知识点:
- Proxy的基础使用
- set、deleteProperty及deleteProperty用法
题干:
我的答案
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
/**
* 这题其实只需要用Proxy的get方法就能实现题目所需了,
* 这里我们顺便拓展一下set和deleteProperty
* Reflect是ES6新增的,用来代理对象,这里用它的静态方法来代理对象
*/
let count = 0
const _proxy = object => {
// 补全代码
return new Proxy(object, {
get:(target, key, receiver)=> {
Reflect.has(target, key) ? count++:count--;
return Reflect.get(target, key, receiver)
},
set:(target, key, value, receiver) => Reflect.set(target, key, value, receiver),
deleteProperty:(target, key) => Reflect.deleteProperty(target, key)
})
}
const obj = {
a: 1,
b: 2,
c: 3
}
const proxy = _proxy(obj)
console.log(proxy.a)//访问属性a,a存在,count++
console.log('count:'+count)//count:1
console.log(proxy.b)//访问属性b,b存在,count++
console.log('count:'+count)//count:2
console.log(proxy.c)//访问属性c,c存在,count++
console.log('count:'+count)//count:3
console.log(proxy.d)//访问属性d,d不存在,count--
console.log('count:'+count)//count:2
proxy.d=99;//为属性d赋值
console.log('count:'+count)//count:2
console.log(proxy.d)//访问属性d,d存在,count++
console.log('count:'+count)//count:3
delete proxy.d//删除属性d
console.log('count:'+count)//count:3
console.log(proxy.d)//访问属性d,d不存在,count--
console.log('count:'+count)//count:2
</script>
</body>
</html>
博客更新不是很及时,需要看后面内容的可以看看我的
gitee仓库
牛客JS题Gitee仓库