首页 > 编程语言 >浅谈下javascript的proxy和reflect

浅谈下javascript的proxy和reflect

时间:2023-03-04 17:44:31浏览次数:40  
标签:Reflect obj 浅谈 对象 javascript prop reflect Proxy target

近日喜欢上了uniapp和vue,但看到相关程序代码中频繁出现了proxy和reflect的使用,于是进行了一番学习,现总结如下。

Proxy和Reflect是ES6(ECMAScript 2015)引入的两个新的特性,它们共同提供了一种可编程的方式,用于拦截、修改、和定义JavaScript对象的基本行为。在这里,我将简单介绍Proxy和Reflect的概念,以及它们的用法。

Proxy是一个代理对象,它可以用来拦截JavaScript对象的一些基本操作。代理对象包装了目标对象,并可以在目标对象上定义各种拦截器。拦截器是一些函数,它们被调用以响应目标对象的行为。例如,当代理对象的属性被访问时,拦截器可以拦截这个行为并返回一个不同的值,或者抛出一个错误。

下面是一个例子,展示了如何使用Proxy来拦截对象的读取操作:

const target = {
  name: "Alice",
  age: 30
};

const handler = {
  get: function(target, prop) {
    console.log(`Reading property '${prop}'`);
    return target[prop];
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出 "Reading property 'name'" 和 "Alice"

 

在这个例子中,我们定义了一个代理对象proxy,它包装了一个目标对象target。我们还定义了一个拦截器handler,其中的get方法被调用以拦截proxy对象的属性读取操作。当我们使用proxy.name读取代理对象的name属性时,拦截器会输出一条日志并返回目标对象的name属性值。

Proxy是一种代理对象,它允许你定义自定义的行为,例如:属性的读取和赋值、函数调用、构造函数调用等等。当你创建一个代理对象时,你可以传递一个处理程序对象,这个处理程序对象定义了代理对象的行为。例如:

let obj = new Proxy({}, {
  get(target, prop) {
    console.log(`Getting property "${prop}"`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting property "${prop}" to "${value}"`);
    target[prop] = value;
  }
});

obj.foo = "bar";
console.log(obj.foo); // 输出 "Getting property "foo"  bar"

在上面的代码中,我们创建了一个空对象的代理,然后定义了一个处理程序对象,该处理程序对象将处理代理对象的属性访问。当我们给代理对象设置一个属性时,代理对象会调用设置属性的处理程序,该处理程序会输出一条消息。当我们获取代理对象的属性时,代理对象会调用获取属性的处理程序,该处理程序也会输出一条消息。

Reflect则是一个内置对象,它提供了一组方法来操作JavaScript对象。Reflect的方法与一些对象操作的方法(例如Object.defineProperty和Object.create)非常相似,但是Reflect方法更加一致和易于使用,并且可以作为函数调用。Reflect提供的方法与Proxy对象的拦截器方法相对应。Reflect方法返回值与Proxy对象的拦截器方法返回值是相同的。这些方法包括Reflect.get()Reflect.set()Reflect.has()Reflect.deleteProperty()等等。例如:

let obj = { foo: "bar" };

Reflect.set(obj, "foo", "baz"); // 设置 "foo" 的值为 "baz"
console.log(Reflect.get(obj, "foo")); // 输出 "baz"

在上面的代码中,我们使用Reflect.set方法设置了obj对象的"foo"属性的值为"baz",然后使用Reflect.get方法获取了obj对象的"foo"属性的值。与Proxy类似,Reflect还提供了许多其他方法,例如Reflect.construct用于调用构造函数,Reflect.defineProperty用于定义属性等等。

下面是一个例子,展示了如何使用Reflect来代替对象操作:

const obj = { a: 1 };

console.log(obj.a); // 输出 1

const proxy = new Proxy(obj, {
  get: function(target, prop, receiver) {
    console.log(`Reading property '${prop}'`);
    return Reflect.get(target, prop, receiver);
  }
});

console.log(proxy.a); // 输出 "Reading property 'a'" 和 1

 

在这个例子中,我们使用Reflect的get方法来代替了拦截器方法中的return target[prop]。这种方式使代码更简洁和易于维护,因为我们可以使用标准的对象操作方法,同时还可以在拦截器中进行自定义操作。

总之,Proxy和Reflect是一对非常强大的特性,它们可以帮助我们更灵活、更可控地操作JavaScript对象。使用它们,我们可以实现一些很酷的功能,例如数据验证、对象代理

标签:Reflect,obj,浅谈,对象,javascript,prop,reflect,Proxy,target
From: https://www.cnblogs.com/eminer/p/17178695.html

相关文章

  • 关于 Javascript 的几种继承
    原型链的概念:原型链通俗易懂的理解就是可以把它想象成一个链条,互相连接构成一整串链子而原型链中就是实例对象和原型对象之间的链接每个函数都有一个prototype属性,这个p......
  • JavaScript Modal Image
    <!DOCTYPEhtml><html><head><title>JavaScriptModalImage</title></head><styletype="text/css"> .modal{ position:fixed; z-index:1......
  • 【C++随记】浅谈编译与链接
    原文网址:https://zhuanlan.zhihu.com/p/518831355本文讨论的内容来自于仕琪老师的课程:C/C++从基础语法到优化策略课程地址:[C++](快速学习C和C++,基础语法和优化策略,学了不......
  • 3.理解JavaScript的执行上下文、执行上下文栈,可以应用堆栈信息快速定位问题
    1.执行上下文执行上下文就是当前JavaScript代码被解析和执行时所在环境的抽象概念,JavaScript中运行任何的代码都是在执行上下文中运行1.执行上下文的类型全局执行......
  • 2.理解JavaScript的作用域和作用域链
    什么是作用域Javascript中的作用域说的是变量的可访问性和可见性。也就是说整个程序中哪些部分可以访问这个变量,或者说这个变量都在哪些地方可见。作用域的类型全局作......
  • JavaScript中Date对象
    当我们收到甲方的需求,要做一个类似于商城之类的项目的时候,JS的Date对象就至关重要了.因为在商城中,各种优惠和折扣,就需要在一个时间的紧迫下,才能达到一个火爆的效果,......
  • JavaScript——快速判断数组对象的值是否全部满足条件
    前言EasyBe主题开发中遇到一个问题,查看了下MDN文档找到了比较合适的方法,这里只做了简单的示例,详细的一些描述和原理建议访问MDN进行查看;every:everysome:some内容ev......
  • JavaScript中的Date
    得到本地时间,在不同时区打印newDate(),输出的结果将会不一样:newDate(); 得到本地时间距1970年1月1日午夜(GMT时间)之间的毫秒数:newDate().getTime(); 返......
  • Landsat数据在USGS中无法下载Surface Reflectance产品的解决方法
      本文介绍在USGS官网下载Landsat遥感影像数据时,出现报错信息,无法下载地表反射率产品(SurfaceReflectance)的解决办法。  最近,利用这篇文章批量下载Landsat遥感影像的......
  • 关于Javascript——Promise的一些理解
    Promise是一个构造函数,promise是通过Promise构造函数声明的对象。 promise对象用来“管理”一次异步任务。 通过newPromise()声明一个promise对象的时候需要传两个参......