无法将代理传递到HTML元素以使用appendChild。

Question

我编写了一个薄的包装器，它接收由 document.createElement 创建的节点，并添加了一些方法。这个包装器是使用 Proxy 实现的。我所做的只是捕获一些 getter。

  return new Proxy(node, {
    get (target, prop) {
      if (prop === 'node') return target

      if (wFuncs[prop]) {
        return Reflect.get(target, wFuncs[prop]).bind(target)
      }

      return Reflect.get(target, prop)
    }
  })

我原本以为可以将这样的代理传递给appendChild，因为它仍然是Node的实例，并具有来自html元素的所有属性和方法。但是，appendChild会抱怨传递的元素不是一个节点：

类型错误：在节点上执行“appendChild”失败：参数1的类型不是“Node”

有什么解决方法吗？

- Fuzzyma

Answer 1

我们可以重新声明全局appendChild行为。像这样：

1. 创建内部__element属性，返回一个真实的节点

return new Proxy(node, {
        get (target, prop) {
          if (prop === 'node') return target
          if (prop === '__element') return node
    
          if (wFuncs[prop]) {
            return Reflect.get(target, wFuncs[prop]).bind(target)
          }
    
          return Reflect.get(target, prop)
        }
      });

更改全局appendChild

Node.prototype.appendChild = function (el) {
  if (el["__element"]) {
    return _appendChild.call(this, el["__element"]);
  } else {
    return _appendChild.call(this, el);
  }
};

- Yandimirkin Vladislav

---

“appendChild”只是所有Dom方法中唯一不能与代理一起使用的方法之一。目标不是重写它们全部。 - Fuzzyma