时间戳

首页 > 解决方案 > 代理不拦截对象

javascript - 代理不拦截对象

问题描述

我在这里有以下问题：

我尝试创建一个用于学习/实验目的的迷你框架。我有这个标记

 <button click="cool">click me</button>

这是我绑定事件处理程序的自定义属性。我像这样收集它们：

document.querySelectorAll("[click]").forEach(listener => {
  let name = listener.attributes.click.nodeValue;
  listener.addEventListener(
    "click",
    this.staticProp[name].bind(this.staticProp)
  );
});

一切都发生在一个班级里。我传递了我想要使其具有反应性的属性，如下所示：

new Tinyflow({
  prog: "programm",
  howDoesItWork: "good",
  age: 21,
  cool() {
    console.log("nice");
    console.log(this.age);
    this.age++;
  }
});

  constructor(properties) {
    this.reactivityHandler = {
      set(vars, prop, newVal) {
        console.log("i work");
      },
      get(data, prop, newVal) {
        console.log("i work");
      }
    };
    this.staticProp = properties;
    this.passedProps = new Proxy(this.staticProp, this.reactivityHandler);
  }

我希望reactivityHandler每当我的道具发生变化时都会触发，但没有任何反应。在我的控制台中，我看到nice以及如何age增加，但我没有看到i work。

为什么代理不拦截它？

标签： javascript

解决方案

您设置this.passedProps为Proxy, 而您直接使用 访问属性this.age。如果您希望它通过代理，则通过this.passedProps.age和访问属性this.passedProps.age++。

推荐阅读