文档章节

ES6新特性之Proxy

凌兮洛
 凌兮洛
发布于 08/21 16:27
字数 1174
阅读 3
收藏 0

基本概念

字面意思的理解就是代理。

用于定义基本操作的自定义行为,就是我们可以自定义某些行为,比如属性的查找,赋值,枚举,函数调用等。
实际上我们利用这个Proxy实现对编程语言进行编程,就是把一些内部的方式,内置的方法改变了,这种编程就叫做语言编程。属性代理就做拦截。
关于Proxy需要注意的地方有:Proxy内部的this关键字的指向是Proxy代理本身;它的构建方式需要借助一个Proxy的构造函数new Proxy(target,handler),其中target叫做目标对象,Proxy构造函数返回的是一个包装过后的目标对象,handler是代理的行为的函数。

    let handler = {
        get: function(target, name) {
            return name in target ? target[name] : 'Eric';
        }
    };
    
    let p = new Proxy({}, handler);
    p.name;
    // Eric 
    
    
    let proxy = new Proxy({}, {
      get: function(target, property) {
        return 'Eric';
      }
    });
    
    let obj = Object.create(proxy);
    obj.name;
    // Eric    (说明Proxy是可以继承的)

代理操作

  • get, 拦截某个属性的读取操作,接收三个参数:target(目标对象)、property(属性名)、receiver(一般是Proxy对象本身,可选参数)

     let teacher = {
       name: "Eric"
     };
    
     let proxy = new Proxy(teacher, {
       get: function(target, property) {
         if (property in target) {
           return target[property];
         } else {
           throw new ReferenceError("\"" + property + "\" does not exist.");
         }
       }
     });
    
     proxy.name;
     // Eric 
     proxy.age;
     // ReferenceError: "age" does not exist. 
    
    

get属性拦截可以继承,需要注意的一点是,当某个对象不可配置(configurable)或者不可写(writable),使用get会报错。

  • set , 拦截某个属性的赋值操作
    set属性有四个参数:target(目标对象)、property(属性名)、value(属性值)、receiver(Proxy实例本身,可选参数)

     let handler = {
       set: function(obj, prop, value) {
         //如果不是一个整数就抛出一个错误‘The value must an integer’
         if (!Number.isInteger(value)) {
           throw new TypeError('The value must an integer');
         }
         /* document.getElementById(prop).innerHTML = value */
         obj[prop] = value;
       }
     };
    
     let teacher = new Proxy({}, handler);
     teacher.name = 'Eric';
     // TypeError: The value must an integer 
    
    

    同样的,在不可配置(configurable),不可写(writable)的里面,使用set不生效。

  • apply , 函数调用、call和apply拦截
    apply接收三个参数:target(目标对象)、thisArg(目标对象this)、argumentsList(目标对象参数数组)

      var handler = {
        apply (target, ctx, args) {
          return Reflect.apply(...arguments);
        }
      };
    
    
      let target = function () {
        return 'I am Eric';
      };
    
      let handler = {
        apply: function () {
          return 'I am Iven';
        }
      };
    
      let teacher = new Proxy(target, handler);
      teacher();
      // I am Iven 
    
    
  • has, 拦截对象是否具有某个属性 - hasProperty
    has有两个参数:target(目标对象)、prop(查询的属性名)。返回一个布尔值,true or false。

      let handler = {
        has (target, key) {
          if (key.startsWith('_')) {
            return false;
          }
          return key in target;
        }
      };
      let target = {
        _property: 'private',
        property: 'public'
      };
    
      let proxy = new Proxy(target, handler);
      '_property' in proxy;
      // false 
    
    

    注意的点:has不拦截for in循环;对象不可配置(configurable)时,使用has会报错。

  • construct , 拦截new操作符
    construct接收三个参数:target(目标对象)、argumentsList(构造函数参数)、newTarget(最初被调用的构造函数,为了方便能够得到原来构造函数想要得到的结构)。

      var handler = {
        construct (target, args, newTarget) {
          return new target(...args);
        }
      };
    
    
      var teacher = new Proxy(
        function () {},
        {
          construct: function(target, args) {
            return { name: 'Eric' };
          }
        }
      );
      new teacher();
      // { name: 'Eric' } 
    
    

    注意:返回值必须是对象。

  • ownKeys , 拦截属性遍历
    own只有一个参数:target(目标对象)。

      let target = {
        Eric: 100,
        Iven: 200,
      };
    
      let handler = {
        ownKeys(target) {
          return Reflect.ownKeys(target).filter(key => target[key] < 150);
        }
      };
    
      let proxy = new Proxy(target, handler);
      Object.keys(proxy);
      // Eric 
    
    
  • deleteProperty , 拦截删除操作
    deleteProperty接收两个参数:target(目标对象)、property(删除的属性名)。对象不可配置(configurable),使用deleteProperty会报错

  • defineProperty , 拦截Object.defineProperty
    defineProperty接收三个参数:target(目标对象)、property(属性名)、descriptor(描述树)。属性不可扩展(non-extensible)会报错,不可配置(configurable)或者不可写(writable)使用defineProperty不生效。

  • getOwnPropertyDescriptor , 拦截Object.getOwnPropertyDescriptor
    getOwnPropertyDescriptor接收两个参数:target(目标对象)、prop(属性名称)。

  • getPrototypeOf , 拦截获取对象原型
    getPrototypeOf 接收一个参数:target (目标对象)。必须返回对象或null。

  • isExtensible , 拦截Object.isExtensible
    getPrototypeOf 接收一个参数:target (目标对象)。必须返回布尔值。

  • preventExtensions , 拦截Object.preventExtensions
    preventExtensions 接收一个参数:target (目标对象)。必须返回一个布尔值。

  • setPrototypeOf , 拦截Object.setPrototypeOf
    setPrototypeOf 接收两个参数:target (目标对象)、proto (原型对象)。

设置代理之后如何得到默认的行为?有两种方式,一种是Proxy代理取消,另一种是使用reflect。

Proxy代理取消

内部提供的方法:revocable

    let target = {};
    let handler = {};
    let { proxy, revoke } = Proxy.revocable(target, handler);
    revoke();
    proxy.name;
    // ypeError: Cannot perform 'get' on a proxy that has been revoked 

© 著作权归作者所有

上一篇: ES6新特性之Reflect
下一篇: Set 和 Map
凌兮洛
粉丝 2
博文 78
码字总数 79240
作品 0
长沙
私信 提问
vue3.0尝鲜 -- 摒弃Object.defineProperty,基于 Proxy 的观察者机制探索

写在前面: 11月16日早上,Vue.js的作者尤大大在 Vue Toronto 的主题演讲中预演了 Vue.js 3.0的一些新特性,其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制,取代之前使用...

nightZing
2018/12/06
0
0
基于JavaScript的ES6虚拟机--Continuum

ECMAScript6(ES6)规范计划在今年正式发布,作为JavaScript的核心,新版本的一些特性可能会让目前的开发方式发生巨大的变化。目前一些现代浏览器(如Chrome、Firefox等)中已经逐步实现了E...

匿名
2013/01/06
1K
0
es6 新特性整理

本文没有详细描述这些新特性,因为网上都已经有很多相关的介绍了。主要针对ES6 新特性收集了相关范例代码,他可以让你快速了解这个新的javascript规范。 箭头函数 function() 函数的简写表示...

sinat_17775997
2017/12/17
0
0
Vue3.0 尝鲜,Object.defineProperty VS Proxy

编者按:本文转载自掘金专栏,由作者 nightZing 授权奇舞周刊转载 写在前面: 11月16日早上,Vue.js的作者尤大大在 Vue Toronto 的主题演讲中预演了 Vue.js 3.0的一些新特性(https://www.cs...

奇舞周刊
2018/12/08
0
0
《探索ES6》书评与作者采访

由Axel Rauschmayer编著的《探索ES6》是对JavaScript最新特性的一次深入探讨,本文包含了对作者所进行的一次简短的访谈内容。 Axel Rauschmayer博士的著作《探索ES6:升级至JavaScript的下一...

一配
2015/12/03
218
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
今天
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部