明白Javascript的Proxy

2019年8月22日 146次阅读 来源: MudOnTire

关于Proxy

Proxy在计算机范畴是一个很广泛的观点，中文平常翻译为代办，“代办”平常用于形貌或人或某事代表别人行事。罕见的观点有Proxy Server（代办服务器）、Reverse Proxy（反向代办）、Proxy Pattern（代办形式）等。

为了明白Proxy，我们先问本身几个题目：

  1. 什么是Proxy？

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

  2. 为何须要Proxy？

    有几种可以，1. 被代办对象不想直接被接见，就像找明星拍戏须要先联络他的经纪人；2. 被代办对象某些才能不足须要找个人帮他做，比方打官司须要找状师。所以Proxy最少可以起到两方面的作用：举行接见掌握和增添功用。

明白了上面两个题目，进修Javascript的Proxy就简朴多了。

ES6的Proxy

ES6中也涌现了Proxy，和其他的Proxy相似，ES6中的Proxy也用于代办某个东西，一样我们须要弄懂几个题目：

  1. Proxy代办什么？

    代办Object（这是空话，javascript内里一切的东西都是Object）

  2. Proxy代办Object做什么？

    掌握和修正Object的基础行动

  3. 哪些是Object的基础行动？

    比方属性挪用、属性赋值、删除属性、要领挪用等

  4. 为何要掌握和修正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('\n');
    target(msg);
  }
});

myAlert('haha', 'lala');

《明白Javascript的Proxy》

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 */
  }
}

谢谢人人浏览，别的，在这边帮朋侪推一个爱心众筹，愿望人人可以贡献点爱心，朋侪母亲，身患直肠癌，现在在北京武警总医院吸收医治，可留言留下您的联络方式，往后感谢感动人人！

《明白Javascript的Proxy》

    原文作者：MudOnTire
    原文地址: https://segmentfault.com/a/1190000016253613
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞