#yyds干货盘点# 前端歌谣的刷题之路-第三十一-proxy拦截器

简介: #yyds干货盘点# 前端歌谣的刷题之路-第三十一-proxy拦截器

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣

题目

请补全JavaScript代码,请给参数对象添加拦截代理功能并返回这个代理。要求如下:

1. 该函数接收多个参数,首个参数为对象,从第二个参数(包括)往后皆是该对象的属性名

2. 通过该函数给首个参数对象添加拦截器功能,每当该对象访问到该函数第二个参数(包括)往后的属性时,返回"noright"字符串,表示无权限。

image.png编辑

核心代码

<!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>拦截</title>
</head>
<body>
  <!-- 
    通过[...prototypes]获取从第二个参数开始往后的所有参数
    创建一个Proxy实例并且返回,该构造函数接收两个参数,第一个参数是被代理的对象,第二个参数是处理方法
    在处理方法中设置“get”计算方法,该方法接收两个参数,第一个参数是被代理的对象,第二个参数是当前“get”读取的属性
    当获取某个实例属性时,如果这个属性在[...prototypes]数组中,则返回”noright“
 -->
  <script>const _proxy = (object,...prototypes) => {
    let privatePrototype = prototypes
    return new Proxy(object, {
        get(object, prototype) {
            if(privatePrototype.includes(prototype)) return 'noright'
            return</script>
</body>
</html>

总结

通过[...prototypes]获取从第二个参数开始往后的所有参数

创建一个Proxy实例并且返回,该构造函数接收两个参数,第一个参数是被代理的对象,第二个参数是处理方法

在处理方法中设置“get”计算方法,该方法接收两个参数,第一个参数是被代理的对象,第二个参数是当前“get”读取的属性

当获取某个实例属性时,如果这个属性在[...prototypes]数组中,则返回”noright“

相关文章
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
1458 4
|
前端开发 API Docker
web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口
web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口
275 0
|
前端开发 数据库
两步教你ruoyi若依跳过前端拦截器变成自己的前端
如何通过修改前端配置和后端设置来跳过若依(RuoYi)前端的token验证,以便复用其前端框架并将其变成自己的前端。
 两步教你ruoyi若依跳过前端拦截器变成自己的前端
|
前端开发
前端学习笔记202307学习笔记第六十天-axios拦截器3
前端学习笔记202307学习笔记第六十天-axios拦截器3
170 0
|
前端开发
前端学习笔记202307学习笔记第六十天-axios拦截器2
前端学习笔记202307学习笔记第六十天-axios拦截器2
128 0
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-拦截器实现loding效果
前端学习笔记202305学习笔记第二十一天-vue3.0-拦截器实现loding效果
93 0
|
前端开发
前端学习笔记202305学习笔记第二十天-vue3.0-了解proxy
前端学习笔记202305学习笔记第二十天-vue3.0-了解proxy
96 0
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
833 6
|
前端开发 JavaScript API
前端 JS 经典:Proxy 和 DefineProperty
前端 JS 经典:Proxy 和 DefineProperty
337 0
|
JSON 前端开发 Java
(简易详细)spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
(简易详细)spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
1507 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式