无法将 html 元素周围的代理传递给appendChild

Question

我编写了一个薄包装器，它传递了创建的节点document.createElement并添加了一些方法。这个包装器是用代理实现的。我所做的就是抓住一些吸气剂。

  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因为它仍然是 html 元素的实例Node，并且具有 html 元素的所有属性和方法。然而，appendChild 抱怨传递的元素不是 Node：

TypeError：无法在“Node”上执行“appendChild”：参数 1 不是“Node”类型

关于如何解决这个问题有什么想法吗？

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)
        }
      });

2. 更改全局appendChild

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