返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript Object.defineProperty与proxy代理模式的使用详细分析
  • 509
分享到

JavaScript Object.defineProperty与proxy代理模式的使用详细分析

JavaScript Object.definePropertyJavaScript proxy 2022-11-13 18:11:57 509人浏览 泡泡鱼
摘要

目录1. Object.defineProperty2. Object.defineProperties3. proxy代理模式总结1. Object.defineProperty

1. Object.defineProperty

const obj = {};
Object.defineProperty(obj,prop,descript);
  • 参数 obj 要定义属性的对象
  • prop 要定义的属性
  • descript 属性描述符

返回值:被传递给函数的对象

descript接收一个对象作为配置:

  • writable

属性是否可写 默认值fasle

  • value

属性的值 默认值false

  • enumerable

属性是否可枚举,关系到能否被for…in、Object.keys()以及in关键字遍 默认值false

  • configurable 属性是否可以被defineProperty定义
  • set setter函数
  • get getter函数

使用defineProperty定义的属性descript默认值全为false

const obj = {};
obj.name = 'a';
//等同于
Object.defineProperty(obj,'name',{
  configurable: true,
  value: 'a',
  writable: true,
  enumerable: true,
});
conts obj1 = Object.defineProperty({},'name',{value: 'jack'});
//等同于
Object.defineProperty({},'name',{
  value: 'jack',
  enumerable: false,
  writable: false,
  configurable: fasle,
})

value和writable不能和setter与getter一起使用

       const obj = Object.defineProperty({},name,{
        writable:true,
        value: 'jack',
        set:function(newVal){
          return newVal;
        },
        get:function(val){
          return val;
        }
       });

执行上面的代码出现异常:

Uncaught TypeError: property descriptors must not specify a value or be writable when a getter or setter has been specified.

也就是说我们使用writable和value或者set和get去定义属性的读写,不能混合使用

      const obj = Object.defineProperty({},name,{
        writable:true,
       });
       const obj1 = Object.defineProperty({},name,{
        set:function(newVal){
          return newVal;
        },
        get:function(val){
          return val;
        }
       });
       obj.name = 'ian';
       obj1.name = 'jack';

2. Object.defineProperties

Object.defineProperties用法与Object.definePropert一致,可以同时定义多个属性

      const obj = Object.defineProperties(obj, {
        name: {
          configurable: true,
          enumerable: true,
          writable: true,
          value: 'ian',
        },
        gender: {
          writable: false,
          value: 'male'
        },
        age: {
          set: function (val) { return val },
          set: function (val) { return val },
        }
      });

3. proxy

proxy的功能是代理对象,用于拦截对象的基本操作和自定义,与Object.defineProperty类似,区别是proxy代理整个对象,defineProperty只能代理某个属性。

语法

const obj = {};
const proxyObj = new Proxy({obj, handler});

handler 对象的方法:

  • setProptotypeOf()

Object.setPropertyOf的捕捉器

  • isExtensible()

Object.isExtensible的捕捉器

  • preventExtensions()

Object.preventExtensions方法的捕捉器

  • getOwnPropertyDescritor()

Object.getOwnPropertyDescriptor方法的捕捉器

  • defineProperty()

Object.definePropert方法的捕捉器

  • has()

in操作符的捕捉器

  • deleteProperty()

delete操作符的捕捉器

  • set

属性设置操作的捕捉器

  • get

属性获取操作的捕捉器

  • onwKeys

Object.getOwnPropertyNames和Object.getOwnSymbos的捕捉器

  • apply

函数调用操作的捕捉器

  • constructor

new操作符的捕捉器

使用get捕捉器

    const obj = { name: 'ian', age: 21 };
    const proxyObj = new Proxy(obj, {
      get: function (obj, prop) {
        return prop in obj ? obj[prop] : 'prop not existent';
      },
    });
    console.log(proxyObj.gender); //prop not existent

使用set捕捉器验证属性值

      const obj = { name: 'ian' };
      const proxyObj = new Proxy(obj, {
        set: function (obj, prop, value) {
          if (prop === 'age') {
            if (typeof value !== 'number') {
              throw new TypeError('The age is not Integer');
            };
            if (value > 200) {
              throw new RangeError('The age is not invalid');
            };
          }
          obj[prop] = value;
          //标识修改成功
          return true;
        }
      });
      proxyObj.gender = 'male'; //male
      proxyObj.age = '二十'; // Uncaught TypeError: The age is not Integer
      proxyObj.age = 201;  //Uncaught RangeError: The age is not invalid
      proxyObj.age = 20; //20

捕获new操作符

    function Person(name) {
      this.name = name;
    };
    const ProxyPerson = new Proxy(Person, {
      construct: function (target, args) {
        //使用原本的构造函数
        return new Person(...args);
      }
    })
    var jack = new ProxyPerson('jack');
    console.log(jack);//Object { name: "jack" }

捕获函数调用

    //执行原本的函数
    const proxyFoo = new Proxy(log,{
      apply:function(target,that,args){
        target(args);
      }
    });
    proxyFoo('foo'); //foo
    //自定义函数
    const proxyFoo1 = new Proxy(log, {
    apply: function (target, that, args) {
      //将log改成alert执行
      alert(args);
    }
   });
    proxyFoo1('foo'); //foo

代理模式

当我们去访问一个数据的时候,不直接去访问数据,而是通过代理(Proxy)作为一个中间者替我们去获取和设置数据,在proxy层可以做一些访问控制等, 例如进行数据的校验数,据合法后再设置给原数据,起到一个保护和校验的功能。常见的代理模式有:

  • 保护代理

给被调用者提供访问控制,确认调用者的权限

  • 远程代理
  • 虚拟代理

用来代替巨大的对象,确保在需要的时候才被创建

  • 智能引用代理

总结

  • proxy是浏览器提供的代理方式,相比较defineProperty来说Proxy更加灵活,能代理对象的多个属性
  • proxy还能捕捉和拦截数组、函数、构造器、以及Object的一些方法和操作符

到此这篇关于javascript Object.defineProperty与proxy代理模式的使用详细分析的文章就介绍到这了,更多相关js Object.defineProperty与proxy内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript Object.defineProperty与proxy代理模式的使用详细分析

本文链接: https://lsjlt.com/news/169403.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript Object.defineProperty与proxy代理模式的使用详细分析
    目录1. Object.defineProperty2. Object.defineProperties3. proxy代理模式总结1. Object.defineProperty ...
    99+
    2022-11-13
    JavaScript Object.defineProperty JavaScript proxy
  • javascript代理模式实例分析
    这篇文章主要介绍“javascript代理模式实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript代理模式实例分析”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • JavaScript设计模式之代理模式的示例分析
    这篇文章主要为大家展示了“JavaScript设计模式之代理模式的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript设计模式之代理模式的...
    99+
    2024-04-02
  • JavaScript 设计模式中的代理模式详解
    前言: 代理模式,代理(proxy)是一个对象,它可以用来控制对另一个对象的访问。 现在页面上有一个香港回归最想听的金典曲目列表: <ul id="container">...
    99+
    2024-04-02
  • javascript数据代理与事件详解分析
    目录数据代理与事件回顾Object.defineProperty方法何为数据代理Vue中的数据代理事件的基本使用事件的修饰符键盘事件数据代理与事件 星光不负赶路人,满身花香蝶自来 ...
    99+
    2024-04-02
  • javascript设计模式之迭代器模式的示例分析
    这篇文章主要介绍了javascript设计模式之迭代器模式的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。迭代器模式分为内部迭代器和...
    99+
    2024-04-02
  • Java的代理模式示例分析
    这篇文章主要讲解了“Java的代理模式示例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Java的代理模式示例分析”吧!定义代理模式(Proxy Parttern) 为一个对象提供一个替...
    99+
    2023-06-29
  • Java详细分析Lambda表达式与Stream流的使用方法
    目录LambdaStream流 Lambda        Lambda 表达式是一个匿名函数,我们可以把 lambda 表达式理解...
    99+
    2024-04-02
  • C++详细分析讲解引用的概念与使用
    目录1.引用的概念2.引用的格式3.引用的特性4.取别名原则5.引用的使用场景做参数做返回值int&Count()的讲解传值传引用效率比较6.引用和指针的不同点1.引用的概念...
    99+
    2024-04-02
  • vue3响应式Proxy与Reflect的理解及基本使用实例详解
    目录正文理解Proxy与ReflectProxyReflect实践示例正文 在第四章中,作者讲述了Vue.js中响应式系统的设计与实现,这一块其实是整个框架的基石,也是MVVM中,V...
    99+
    2022-11-13
    vue3响应式Proxy Reflect vue3响应式
  • Express使用html模板的详细代码
    express默认使用jade模板,可以配置让其支持使用ejs或html模板。 1. 安装ejs 在项目根目录安装ejs. npm install ejs 2、引入ejs var ...
    99+
    2022-06-04
    模板 代码 详细
  • Nginx工作模式及代理配置的使用细节
    目录一、Nginx 的工作模式1.单进程模式2.Master-Worker 模式3.问题处理二、Nginx 代理配置1.带 /2.不带 /一、Nginx 的工作模式 1.单进程模式 ...
    99+
    2024-04-02
  • JavaScript中装饰者模式与AOP的示例分析
    这篇文章将为大家详细讲解有关JavaScript中装饰者模式与AOP的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。什么是装饰者模式当我们拍了一张照片准备发朋友圈...
    99+
    2024-04-02
  • 代理模式在vue中的使用示例解析
    目录引言1、图片预加载2、缓存代理3、跨域代理总结引言 当本体处于保护、缓存、虚拟或者过滤等情况下时,一个数据不适合被访问或者一个方法不能被直接调用,可以采用代理模式,先创建一个代理...
    99+
    2022-12-22
    vue 代理模式 vue 代理模式使用
  • JavaScript 代理模式的深层解析:从理论到实践
    代理模式概述 代理模式是一种设计模式,它允许您创建一个代理对象,该代理对象作为另一个对象(称为目标对象)的代理或替代品。代理对象提供与目标对象相同的接口,但它可以增强、扩展或控制目标对象的访问和行为。 代理模式类型 代理模式有四种主要类...
    99+
    2024-03-09
    JavaScript、代理模式、对象包装、函数扩展、原型扩展
  • axios的二次封装与proxy反向代理怎么使用
    本文小编为大家详细介绍“axios的二次封装与proxy反向代理怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“axios的二次封装与proxy反向代理怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧...
    99+
    2023-06-29
  • 浅析JavaScript中严格模式的使用
    目录认识严格模式严格模式限制认识严格模式 在ECMAScript5标准中,JavaScript提出了严格模式的概念(Strict Mode): 严格模式很好理解,是一种具有限制性的J...
    99+
    2023-05-18
    JavaScript严格模式使用 JavaScript严格模式
  • web前端中代理模式的示例分析
    这篇文章主要为大家展示了“web前端中代理模式的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“web前端中代理模式的示例分析”这篇文章吧。代理模式(Pr...
    99+
    2024-04-02
  • Java详细分析String类与StringBuffer和StringBuilder的使用方法
    目录String类基本概念String字符串的存储原理String类的常用构造方法String类中常用方法StringBuffer类StringBuilder类String类基本概念...
    99+
    2024-04-02
  • C++ 超详细分析多态的原理与实现
    目录多态的定义及实现多态的构成条件虚函数重写C++11的override和final抽象类多态的原理虚函数表动态绑定与静态绑定单继承和多继承关系的虚函数表单继承中的虚函数表多继承中的...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作