ES6 proxy和reflect的使用方法与应用实例分析

本文实例讲述了ES6 proxy和reflect的使用方法。分享给大家供大家参考，具体如下：

proxy和reflect都是es6为了更好的操作对象而提供的新的API，接下来探讨一下二者的作用，联系。

设计proxy，reflect的作用：

proxy的作用：

Proxy的设计目的在于（修改编程语言），修改某些操作方法的默认行为，

等同于在语言层面作出修改，是元编程（meta programming）  例如修改set，get方法

reflect的作用：

1，映射一些明显属于对象语言内部的方法，目前是共存于Object和Reflect上，未来只在Reflect上

2，修改一些Object上的方法返回的结果，减少异常抛出，使其变得更加合理

3，让Object操作都变成函数行为（主要的作用）

4，Reflect对象的方法与Proxy对象的方法一一对应（主要的作用）

proxy和reflect的方法：

proxy的实例方法：

get() set() apply() has() cunstruct() deleteProperty() defineProperty()
getOwnPropertyDescriptor() getPrototypeOf() isExtensible() ownKeys(), preventExtensions() setPrototypeOf()   
var person = {
 name: "张三"
};

var proxy = new Proxy(person, {
 get: function(target, property) {
  if (property in target) {
   return target[property];
  } else {
   throw new ReferenceError("Property \"" + property + "\" does not exist.");
  }
 }
});

注：目标对象内部的this关键字会指向 Proxy 代理

自身方法：Proxy.revocable方法返回一个可取消的 Proxy 实例

reflect的静态方法：

和proxy相对应，reflect有13个静态方法，分别一一对应于proxy的实例方法

Reflect.apply(target, thisArg, args) Reflect.construct(target, args)
Reflect.get(target, name, receiver) Reflect.set(target, name, value, receiver)
Reflect.defineProperty(target, name, desc) Reflect.deleteProperty(target, name)
Reflect.has(target, name) Reflect.ownKeys(target)
Reflect.isExtensible(target) Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name) Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)  

proxy和reflect联系：proxy的实例方法和reflect的静态方法一一对应

实例：观察者模式的实现

const queuedObservers = new Set();

const observe = fn => queuedObservers.add(fn);//接收一个函数fn
const observable = obj => new Proxy(obj, {set});//接收一个对象obj，采用set函数拦截设置obj

function set(target, key, value, receiver) {
 const result = Reflect.set(target, key, value, receiver);
 queuedObservers.forEach(observer => observer());
 return result;
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • ES6知识点整理之Proxy的应用实例详解

    本文实例讲述了ES6知识点整理之Proxy的应用.分享给大家供大家参考,具体如下: Proxy 用于修改对象某些操作的默认行为,可以对外界的访问进行过滤和改写,其概念类似于元编程. Proxy 让我们可以对任何对象的绝大部分行为进行监听和干涉,实现更多的自定义程序行为.在目标对象之前架设一层"拦截",外界对该对象的访问,都必须先通过这层拦截. 目前[兼容性]存在一定的问题,目前在chrome和ff浏览器中的非严格模式下可用,一些先进的技术即使在目前不能广泛应用,但随着时间的流逝,都将会

  • 实例解析ES6 Proxy使用场景介绍

    ES6 中的箭头函数.数组解构.rest 参数等特性一经实现就广为流传,但类似 Proxy 这样的特性却很少见到有开发者在使用,一方面在于浏览器的兼容性,另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用场景.就我个人而言是非常喜欢 ES6 的 Proxy,因为它让我们以简洁易懂的方式控制了外部对对象的访问.在下文中,首先我会介绍 Proxy 的使用方式,然后列举具体实例解释 Proxy 的使用场景. Proxy,见名知意,其功能非常类似于设计模式中的代理模式,该模式常用于三个方面:

  • ES6之Proxy的get方法详解

    Proxy是在ES2015(ES6)中新添加内置对象,用于自定义一些基本操作. 这篇文章是我在学习Proxy的时候对于get方法的一些心得. 作为ES2015新定义的内置对象,Proxy 能够拦截并且自定义对象以及函数的一些基本操作,具有很高的优先级和便利性,能够让我们在写代码的时候多出一种解决难题的途径. Proxy的get方法用于拦截对象属性的读取操作,例如 obj.key 和 obj.[key].在给Proxy的handler参数中设置get方法后,每当进行读取操作时,会优先调用该get方

  • ES6中Proxy代理用法实例浅析

    本文实例讲述了ES6中Proxy代理用法.分享给大家供大家参考,具体如下: ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作.这个功能非常的有用.举一个例子来说: var engineer = { name: 'Joe Sixpack', salary: 50 }; var interceptor = { set: function (receiver, property, value) { console.log(property, 'is changed to',

  • ES6中Proxy与Reflect实现重载(overload)的方法

    本文实例讲述了ES6中Proxy与Reflect实现重载(overload)的方法.分享给大家供大家参考,具体如下: Proxy与Reflect实现重载(overload) 从语法角度讲JavaScript不支持重载.原因很简单,JS中函数可以传入任意类型.任意个数的参数,通通可以通过在函数内使用this.arguments获得.这样,就无法实现同名函数参数列表不同实现不同功能.当然,在实际使用过程中,可以人为去检测传入实参的个数及类型,来进行不同操作.但是,我认为这不能叫做重载. ES6带来了

  • 详细探究ES6之Proxy代理

    前言 在ES6中,Proxy构造器是一种可访问的全局对象,使用它你可以在对象与各种操作对象的行为之间收集有关请求操作的各种信息,并返回任何你想做的.ES6中的箭头函数.数组解构.rest 参数等特性一经实现就广为流传,但类似 Proxy 这样的特性却很少见到有开发者在使用,一方面在于浏览器的兼容性,另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用场景.就我个人而言是非常喜欢 ES6 的 Proxy,因为它让我们以简洁易懂的方式控制了外部对对象的访问.在下文中,首先我会介绍 Prox

  • JavaScript中的Reflect对象详解(ES6新特性)

    Reflect介绍: Reflect这个对象在我的node(v4.4.3)中还没有实现, babel(6.7.7)也没有实现 ,新版本的chrome是支持的, ff比较早就支持Proxy和Reflect了,要让node支持Reflect可以安装harmony-reflect ; Reflect不是构造函数, 要使用的时候直接通过Reflect.method()调用, Reflect有的方法和Proxy差不多, 而且多数Reflect方法原生的Object已经重新实现了. 什么要使用Reflect

  • 浅谈es6语法 (Proxy和Reflect的对比)

    如下所示: { //原始对象 let obj={ time:'2017-03-11', name:'net', _r:123 }; //(代理商)第一个参数代理对象,第二个参数真正代理的东西 let monitor=new Proxy(obj,{ // 拦截对象属性的读取 get(target,key){ return target[key].replace('2017','2018') }, // 拦截对象设置属性 set(target,key,value){ if(key==='name')

  • JavaScript中的ES6 Proxy的具体使用

    场景 就算只是扮演,也会成为真实的自我的一部分.对人类的精神来说,真实和虚假其实并没有明显的界限.入戏太深不是一件好事,但对于你来说并不成立,因为戏中的你才是真正符合你的身份的你.如今的你是真实的,就算一开始你只是在模仿着这种形象,现在的你也已经成为了这种形象.无论如何,你也不可能再回到过去了. Proxy 代理,在 JavaScript 似乎很陌生,却又在生活中无处不在.或许有人在学习 ES6 的时候有所涉猎,但却并未真正了解它的使用场景,平时在写业务代码时也不会用到这个特性. 相比于文绉绉的

  • ES6 proxy和reflect的使用方法与应用实例分析

    本文实例讲述了ES6 proxy和reflect的使用方法.分享给大家供大家参考,具体如下: proxy和reflect都是es6为了更好的操作对象而提供的新的API,接下来探讨一下二者的作用,联系. 设计proxy,reflect的作用: proxy的作用: Proxy的设计目的在于(修改编程语言),修改某些操作方法的默认行为, 等同于在语言层面作出修改,是元编程(meta programming)  例如修改set,get方法 reflect的作用: 1,映射一些明显属于对象语言内部的方法,

  • Java的Arrays.sort()方法排序算法实例分析

    Java的Arrays.sort()方法排序算法实例分析

    暂时网上看过很多JDK8中Arrays.sort的底层原理,有些说是插入排序,有些说是归并排序,也有说大于域值用计数排序法,否则就使用插入排序...其实不全对.让我们分析个究竟: // Use Quicksort on small arrays if (right - left < QUICKSORT_THRESHOLD) { //QUICKSORT_THRESHOLD = 286 sort(a, left, right, true); return; } 数组一进来,会碰到第一个阀值QUICK

  • vue3响应式Proxy与Reflect的理解及基本使用实例详解

    目录 正文 理解Proxy与Reflect Proxy Reflect 实践示例 正文 在第四章中,作者讲述了Vue.js中响应式系统的设计与实现,这一块其实是整个框架的基石,也是MVVM中,ViewModel(VM)的重要组成部分. 其实在上一章中我已经感觉很难了,有一些操作作者也只是几笔带过,却很值得我们思考.这一张中,我们将目光着重于响应式数据本身,来完善上一章中我们的demo. 理解Proxy与Reflect vue3的响应式离不开Proxy,说到Proxy则离不开Reflect.这两个

  • JavaScript中call和apply方法的区别实例分析

    本文实例分析了JavaScript中call和apply方法的区别.分享给大家供大家参考,具体如下: 这两个方法不经常用,但是在某些特殊场合中是非常有用的,下面主要说下它们的区别: 1.首先,JavaScript是一门面向对象的语言,也就是说它有this的概念.而且JavaScript是一门动态类型语言,为什么说它是动态类型语言呢?因为JavaScript在编译时没有类型检查的过程,不会去检查创建的对象类型,也不会去检查传递的参数类型,所以它的变量类型在运行期间是可以改变的. 2.要知道call

  • Java 8新增的方法参数反射实例分析

    本文实例讲述了Java 8新增的方法参数反射.分享给大家供大家参考,具体如下: 一 点睛 Java 8在java.lang.reflect包下新增了一个Executable抽象基类,该对象代表可执行的类成员,该类派生了Constructor.Method两个子类. Executable基类提供了大量方法来获取修饰该方法或构造器的注解信息:还提供了isVarArgs()方法用于判断该方法或构造器是否包含数量可变的形参,以及通过getModifiers()方法来获取该方法或构造器的修饰符.除此之外,

  • jQuery解析XML与传统JavaScript方法的差别实例分析

    本文实例讲述了jQuery解析XML与传统JavaScript方法的差别.分享给大家供大家参考.具体分析如下: 1. 传统javascript方法: var xmlDoc = request.responseXML; try // Build Markers, if available { var markers = xmlDoc.getElementsByTagName("marker") ; for ( var i = 0; i < markers.length ; i++

  • java中request对象各种方法的使用实例分析

    本文实例讲述了java中request对象各种方法的使用.分享给大家供大家参考,具体如下: request对象是从客户端向服务器端发出请求,包括用户提交的信息以及客户端的一些信息.request对象是javax.servlet.http.HttpServletRequest类的实现实例. request对象封装了浏览器的请求信息,通过request对象的各种方法可以获取客户端以及用户提交的各项请求信息. 使用request对象获取客户端提交的请求参数的常用方法如下: 1.String getPa

  • Java中构造器内部的多态方法的行为实例分析

    Java中构造器内部的多态方法的行为实例分析

    本文实例讲述了Java中构造器内部的多态方法的行为操作.分享给大家供大家参考,具体如下: 这篇文章主要讨论的是,若在一个构造器中调用正在构造的对象的某个动态绑定的方法时会出现的情况.在此之前,我们需要知道构造器是如何在复杂的层次结构中运作的,尽管构造方法并不具有多态性,因为它们实际上是static方法,只不过是隐式声明的static. 复杂层次结构中构造器的调用顺序 基类的构造器总是在导出类的构造过程中被调用,而且按照继承层次逐渐向上链接,以使每个基类的构造器都能得到调用.这样做是因为,在Jav

  • JS数组方法concat()用法实例分析

    JS数组方法concat()用法实例分析

    本文实例讲述了JS数组方法concat()用法.分享给大家供大家参考,具体如下: 数组方法concat() concat()可以基于当前数组中的所有项创建一个新数组.即这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组. 没有给concat方法传递参数的情况下,它只是复制当前数组并返回副本. 如果传递的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中 如果传递的值是不是数组,这些值会被简单的添加到数组的末尾 注意:该方法不会改变先后的数

  • JS数组方法reverse()用法实例分析

    JS数组方法reverse()用法实例分析

    本文实例讲述了JS数组方法reverse()用法.分享给大家供大家参考,具体如下: reverse()方法 定义:反转数组项的顺序 语法: arr.reverse() 参数:/ 返回值:返回该数组的引用. 代码如下: var arr1 = [1, 2, 3, 4, 5, 6]; var arr2 = ['A', 'B', 'C']; var arr3 = ['AAA', 'BBB', 'CCC']; var arr4 = ['Hello', 'World']; Array.prototype.c

随机推荐