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

 更新时间:2022年10月14日 15:40:50   作者:爱思考的猪  
这篇文章主要介绍了JavaScript Object.defineProperty与proxy代理模式的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript基于AJAX回调函数传递参数实例分析

    Javascript基于AJAX回调函数传递参数实例分析

    这篇文章主要介绍了Javascript基于AJAX回调函数传递参数的方法,结合实例形式较为详细的分析了JavaScript使用ajax传递参数的相关技巧以及回调函数的实现技巧,需要的朋友可以参考下
    2015-12-12
  • 原生js二级联动效果

    原生js二级联动效果

    这篇文章主要为大家详细介绍了原生js二级联动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 用js+cookie记录滚动条位置

    用js+cookie记录滚动条位置

    用js+cookie记录滚动条位置...
    2007-01-01
  • 微信小程序授权登录的最新实现方案详解(2023年)

    微信小程序授权登录的最新实现方案详解(2023年)

    最近由于公司需要研究了一下微信小程序的开发,特此记录一下小程序登录授权的流程,便于自己理解,也希望对他人有多帮助,下面这篇文章主要给大家介绍了关于微信小程序授权登录的最新实现方案的相关资料,需要的朋友可以参考下
    2023-02-02
  • canvas绘制刮刮卡效果

    canvas绘制刮刮卡效果

    这篇文章主要为大家详细介绍了canvas绘制刮刮卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 开启BootStrap学习之旅

    开启BootStrap学习之旅

    当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢,你如果也喜欢Bootstrap前端开发框架,不要错过这次旅行
    2016-05-05
  • JavaScript语言中的Literal Syntax特性分析

    JavaScript语言中的Literal Syntax特性分析

    JavaScript语言中的Literal Syntax特性分析...
    2007-03-03
  • 在uni-app中踩过的坑及解决

    在uni-app中踩过的坑及解决

    这篇文章主要介绍了在uni-app中踩过的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • JavaScript数据扁平化详解

    JavaScript数据扁平化详解

    这篇文章主要为大家介绍了JavaScript数据扁平化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • JS实现判断有效的数独算法示例

    JS实现判断有效的数独算法示例

    这篇文章主要介绍了JS实现判断有效的数独算法,结合实例形式分析了javascript数独判断的原理及相关算法实现、使用操作技巧,需要的朋友可以参考下
    2019-02-02

最新评论