首页 前端知识 牛客JS题(三十二)Proxy计数器

牛客JS题(三十二)Proxy计数器

2024-08-30 20:08:46 前端知识 前端哥 132 371 我要收藏

注释很详细,直接上代码

涉及知识点:

  1. Proxy的基础使用
  2. 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仓库

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17233.html
评论
发布的文章

JWT(JSON WEB TOKEN)详解

2024-09-10 23:09:36

NPM 常用命令(十二)

2024-09-10 23:09:24

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!