标签: es6-proxy

我有以下代理:

const p = new Proxy({
  [Symbol.iterator]: Array.prototype.values,
  forEach: Array.prototype.forEach,
}, {
  get(target, property) {
    if (property === '0') return 'one';
    if (property === '1') return 'two';
    if (property === 'length') return 2;
    return Reflect.get(target, property);
  },
});

它是一个类似于数组的对象,因为它具有数字属性和length指定元素数量的属性.我可以使用for...of循环迭代它:

for (const element of p) {
  console.log(element); // logs 'one' and 'two'
}

但是,该forEach()方法不起作用.

p.forEach(element => console.log(element));

此代码不记录任何内容.永远不会调用回调函数.为什么它不起作用,我该如何解决？

代码段:

const p = new Proxy({
  [Symbol.iterator]: Array.prototype.values,
  forEach: Array.prototype.forEach,
}, {
  get(target, property) {
    if (property …

我正在用babel（env）编译代码，编译到ES5。

这是代码：

(async () => {
     const p = async () => {
          return new Proxy({}, {
               get: (target, property) => {
                    console.log(property);
               }
          })
     };

     const r = await p();// await calls .then on the result of p()
})();

将 eslint 与 React 配置结合使用时，我在使用Object.defineProperty. 错误说：

避免使用Object.defineProperty，而是使用Reflect.defineProperty。（偏好-反思）

在Preferred-Reflect 的eslint文档中，他们说它已被弃用，原因是：

现在，这条规则的初衷似乎被误导了，因为我们已经了解到，Reflect方法实际上并不是为了替换Object规则建议的对应项，而是作为与代理一起使用的低级原语存在，以便复制默认行为各种先前存在的功能。

Reflect.defineProperty那么我的问题是：使用而不是有什么优势吗Object.defineProperty？

当我深度克隆代理对象时，它返回一个没有代理的普通对象。但当我深度克隆对象时我想要代理对象。

前任：

class Abc {
  constructor() {
    this.a = 4;
    return new Proxy(this, {
      get(target, name) {
        return target[name];
      },
    });
  }
}

class Xyz {
  constructor() {
    this.x = new Abc();
    this.y = _.cloneDeep(this.x);
  }
}

var proxyObject = new Xyz().x;
var normalObject = new Xyz().y;
console.log(proxyObject); // Type Proxy
console.log(normalObject); // Type Object

有没有办法克隆像 this.x 这样的原始对象行为的深层对象

我正在开发一个使用事件的应用程序。应用程序的模块在单独的容器中执行，我考虑使用代理来驯服被触发的事件。但是，我似乎无法dispatchEvent接受已代理的事件。

以下失败：

let event = new CustomEvent('my event');
let eventProxy = new Proxy(event, {});
let eventTarget = document.createElement('div');

try {
    eventTarget.dispatchEvent(eventProxy); // VM134:4 Uncaught TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'
} catch(error) {
    console.log(error.message);
}

任何人都有任何想法如何dispatchEvent才能接受代理？

我在我的项目中使用 jest 和 typescript 。使用 Identity-obj-proxy 我的所有 .ts 文件都未定义，但 .js 文件按预期工作。

这是我的 tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "lib",
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "es6-promise",
      "webpack-env"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015.collection"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "lib"
  ]
}

这是我的笑话配置：

"jest": {
    "unmockedModulePathPatterns": [
      "React"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "^.+\\.(d\\.ts|ts|tsx)$": "ts-jest" …

我正在尝试使用JavaScript代理来检测对象数组中的更改。

问题：每当删除或插入数组发生变化时，我都希望得到该删除或插入的项目。

当前代码

target = [{ id: 1, a: 'a' }, { id: 2, a: 'b' }];
proxy = new Proxy(target, {
    get: function (target, property: string, receiver) {
        if (property === 'pop') {
            console.log('deleted object', target[target.length - 1]);
        }
        console.log('get', property);
        // property is index in this case
        return target[property];
    },
    set: function (target, property, value, receiver) {
        console.log('set', property, 'to', value);
        target[property] = value;
        // you have to return true to accept the changes
        return true;
    } …

我正在为存储在 MongoDB 中的文档（类似于 Mongoose）构建类似 ActiveRecord 类的东西。我有两个目标：

1. 使用代理拦截文档上的所有属性设置器，并自动创建要发送到 Mongo 的更新查询。我已经在 SO 上找到了解决此问题的方法。

2. 防止从数据库中进行不必要的读取。即如果在文档上执行一个函数，并且该函数只设置属性，并且不使用文档的现有属性，那么我不需要从数据库中读取文档，我可以直接更新它. 但是，如果该函数使用文档的任何属性，我必须先从数据库中读取它，然后才能继续使用代码。例子：

   // Don't load the document yet, wait for a property 'read'.
   const order = new Order({ id: '123abc' });
   // Set property.
   order.destination = 'USA'; 
   // No property 'read', Order class can just directly send a update query to Mongo ({ $set: { destination: 'USA' } }).      
   await order.save();                            
   

   Run Code Online (Sandbox Code Playgroud)

   // Don't load the document yet, wait for a property 'read'.
   const order = …

   Run Code Online (Sandbox Code Playgroud)

我有一个Proxy模仿虚拟物体的方法。该代理的 Getter 返回准备好的值。

我发现，如果等待代理，它会导致调用我的代理的“then”属性：

await myProxy

在这种情况下我的代理 getter 应该返回什么？返回代理本身或对自身的承诺是一个好主意吗？

例子在这里：

https://jsfiddle.net/rv55Lpu1

让我感到困惑的是，如果我是await一个对象，我会得到该对象，但如果我是awaita Proxy，它需要有一个返回自身的“then”属性陷阱。

我已经编写了一些代码，这些代码应该document.cookie在发生这种情况时监视修改并打印到控制台。

var handler = {
        set: function(target, property, value) {
            console.log("in proxy");
            if (property === "cookie") {
                console.log(`cookie is being modified with val ${value}`);
            }
            return Reflect.set(...arguments);
        }
    }
window.document = new Proxy(document, handler);

但是，似乎文档对象实际上并没有改变。（它仍然是未经代理的版本）。因此，代理永远不会捕获对document.cookie。

如果相反，我想在 上设置代理document.cookie，那似乎也是不可能的，因为无法捕获分配操作，而只能属性 get/set。

平台：Chrome 67.0.3396.79