理解Javascript的Proxy

adie 发布于2019-08-23 11:41 / 1288人阅读

摘要：关于在计算机领域是一个很普遍的概念，中文通常翻译为代理，代理一般用于描述某人或某事代表他人行事。常见的概念有代理服务器反向代理代理模式等。所以至少可以起到两方面的作用进行访问控制和增加功能。理解了上面两个问题，学习的就简单多了。

关于Proxy

Proxy在计算机领域是一个很普遍的概念，中文通常翻译为代理，“代理”一般用于描述某人或某事代表他人行事。常见的概念有Proxy Server（代理服务器）、Reverse Proxy（反向代理）、Proxy Pattern（代理模式）等。

为了理解Proxy，我们先问自己几个问题：

什么是Proxy？

上面说过了，代理就是某人或某事代表他人行事。

为什么需要Proxy？

有几种可能，1. 被代理对象不想直接被访问，就像找明星拍戏需要先联系他的经纪人；2. 被代理对象某些能力不足需要找个人帮他做，比如打官司需要找律师。所以Proxy至少可以起到两方面的作用：进行访问控制和增加功能。

理解了上面两个问题，学习Javascript的Proxy就简单多了。

ES6的Proxy

ES6中也出现了Proxy，和其他的Proxy类似，ES6中的Proxy也用于代理某个东西，同样我们需要弄懂几个问题：

Proxy代理什么？

代理Object（这是废话，javascript里面所有的东西都是Object）

Proxy代理Object做什么？

控制和修改Object的基本行为

哪些是Object的基本行为？

比如属性调用、属性赋值、删除属性、方法调用等

为什么要控制和修改Object的基本行为？

前面讨论过，进行访问控制和增加功能

Proxy用法 基本语法

创建一个proxy：

const p = new Proxy(target, handler);

target：是被代理的对象，可以是对象、数组、方法、构造函数class甚至是另外一个proxy，总之可以是任何JavaScript对象;

handler：一个对象，属性是各种控制或修改target基本行为的方法;

示例

比如用户未设置头像则返回默认头像可以这么写：

const user = { name: "bruce" };
const userProxy = new Proxy(user, {
  get: (obj, prop) => {
    if (prop === "avatar") {
      if (!obj.avatar) {
        return "https://avatar-static.segmentfault.com/100/035/1000355095-5b3c339ebdbe1_big64";
      }
    }
    return obj[prop];
  }
});

console.log(userProxy.avatar); // https://avatar-static···

或者我们可以实现alert换行显示多条信息：

const myAlert = new Proxy(alert, {
  apply: (target, thisArg, argumentsList) => {
    const msg = argumentsList.join("
");
    target(msg);
  }
});

myAlert("haha", "lala");

React源码中也有proxy的应用，用proxy来统一管理event：

/** Proxying after everything set on SyntheticEvent
 * to resolve Proxy issue on some WebKit browsers
 * in which some Event properties are set to undefined (GH#10010)
 */
{
  var isProxySupported = typeof Proxy === "function" &&
  // https://github.com/facebook/react/issues/12011
  !Object.isSealed(new Proxy({}, {}));

  if (isProxySupported) {
    /*eslint-disable no-func-assign */
    SyntheticEvent = new Proxy(SyntheticEvent, {
      construct: function (target, args) {
        return this.apply(target, Object.create(target.prototype), args);
      },
      apply: function (constructor, that, args) {
        return new Proxy(constructor.apply(that, args), {
          set: function (target, prop, value) {
            if (prop !== "isPersistent" && !target.constructor.Interface.hasOwnProperty(prop) && shouldBeReleasedProperties.indexOf(prop) === -1) {
              !(didWarnForAddedNewProperty || target.isPersistent()) ? warning_1(false, "This synthetic event is reused for performance reasons. If you"re " + "seeing this, you"re adding a new property in the synthetic event object. " + "The property is never released. See " + "https://fb.me/react-event-pooling for more information.") : void 0;
              didWarnForAddedNewProperty = true;
            }
            target[prop] = value;
            return true;
          }
        });
      }
    });
    /*eslint-enable no-func-assign */
  }
}

感谢大家阅读，另外，在这边帮朋友推一个爱心众筹，希望大家能够奉献点爱心，朋友母亲，身患直肠癌，目前在北京武警总医院接收治疗，可留言留下您的联系方式，日后感激大家！

GPU服务器服务器托管 javascript理解如何理解javascript 深入理解javascript 云计算的理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97320.html

【资源集合】 ES6 元编程（Proxy & Reflect & Symbol）

摘要：理解元编程和是属于元编程范畴的，能介入的对象底层操作进行的过程中，并加以影响。元编程中的元的概念可以理解为程序本身。中，便是两个可以用来进行元编程的特性。在之后，标准引入了，从而提供比较完善的元编程能力。导读几年前 ES6 刚出来的时候接触过元编程（Metaprogramming）的概念，不过当时还没有深究。今天在应用和学习中不断接触到这概念，比如 mobx 5 中就用到了 Pr...

aikin 2019-08-23 11:28 评论0 收藏0
拿Proxy可以做哪些有意思的事儿

摘要：拿来做些什么因为在使用了后，对象的行为基本上都是可控的，所以我们能拿来做一些之前实现起来比较复杂的事情。如果没有使用关键字来调用的话，对象会直接抛出异常，而中的构造函数指向则会变为调用函数时的作用域。 Proxy是什么首先，我们要清楚，Proxy是什么意思，这个单词翻译过来，就是代理。可以理解为，有一个很火的明星，开通了一个微博账号，这个账号非常活跃，回复粉丝、到处点赞之类的，...

tabalt 2019-08-22 17:30 评论0 收藏0
《深入理解ES6》笔记——代理（Proxy）和反射（Reflection）API（12）

摘要：方法与代理处理程序的方法相同。使用给目标函数传入指定的参数。当然，不用反射也可以读取的值。的例子我们可以理解成是拦截了方法，然后传入参数，将返回值赋值给，这样我们就能在需要读取这个返回值的时候调用。这种代理模式和的代理有异曲同工之妙。反射 Reflect 当你见到一个新的API，不明白的时候，就在浏览器打印出来看看它的样子。 showImg(https://segmentfault....

ZHAO_ 2019-08-21 16:06 评论0 收藏0
《深入理解ES6》笔记——代理（Proxy）和反射（Reflection）API（12）

摘要：方法与代理处理程序的方法相同。使用给目标函数传入指定的参数。当然，不用反射也可以读取的值。的例子我们可以理解成是拦截了方法，然后传入参数，将返回值赋值给，这样我们就能在需要读取这个返回值的时候调用。这种代理模式和的代理有异曲同工之妙。反射 Reflect 当你见到一个新的API，不明白的时候，就在浏览器打印出来看看它的样子。 showImg(https://segmentfault....

shiina 2019-08-29 13:05 评论0 收藏0