使用 HTMLElement 作为自定义函数原型时出现奇怪的属性行为

Question

我正在尝试“扩展”（不确定此类扩展的正确术语是什么）DOMElement 来覆盖某些属性（基本元素）。为此，我动态创建一个函数，其原型是我要扩展的 DOMElement，然后使用该函数（扩展元素）实例化一个对象。

为扩展元素赋值时，预期结果是在扩展元素中创建具有给定名称的属性，而基本元素保持不变，即使它具有同名的属性。使用普通对象作为基本元素可以完美地完成此操作，但是当使用 DOMElement 作为基本元素时，如果存在同名属性，则基本元素会被修改（在 Chrome 和 Firefox 上。即使在尝试获取属性值时，IE9 也会抛出“无效调用对象”。

测试代码：

var base = $("<input type='text' />")[0]; 
//Plain object example: var base = {value:null}
base.value = "original";

var MyClass = function(){ };
MyClass.prototype = base;

var obj = new MyClass();
obj.value = "modified";

obj.value    //"modified" (OK)
base.value   //"modified" (WRONG!) - "original" if plain object is used (OK)

应用程序：

我想要做的是创建具有覆盖“值”属性的输入元素的扩展实例。这将允许将此对象传递给验证器插件，该验证器插件将使用覆盖的值来运行其所有验证规则，并且如果出现任何错误，原始对象将保持不变，而扩展对象将由验证器完成所有修改。

由于 IE 中可能抛出无法解决的异常，我们不打算进一步应用此方法，但我仍然对这种奇怪的行为感兴趣。

问题可能是什么：

我认为这种行为来自这样一个事实：DOMElement 属性和函数不是纯 Javascript，而是浏览器实现的接口的说明。在这种情况下，这种情况会影响原型“继承”的工作方式，从而使值的本机 setter 实现发挥作用，而不是在扩展对象上创建属性。 （这可以通过 IE 中抛出的异常来支持，表明我正在尝试从非本机元素访问本机函数/属性）。

Answer 1

这似乎已经成功了：

var base = $("<input type='text' />")[0];
base.value = "original";

function MyClass() {
  Object.defineProperty(this, "value", {
    value: null,
    configurable: true,
    enumerable: true,
    writable: true
  });
}
MyClass.prototype = base;

var obj = new MyClass();
obj.value = "modified";

console.log(obj.value);    //"modified" (OK)
console.log(base.value);   //"original" (OK)

问题是你的 obj 实例从来没有自己的值：它总是委托给原型的 setter，即 HTMLInputElement .prototype.value。因此 obj 的所有实例都将共享相同的 value 属性。

换句话说，说 obj.value = "modified" 与说 Object.getPrototypeOf(obj).value = "modified" 是一样的，当然还有 Object.getPrototypeOf(obj) === 基。

我的第一次尝试是为 MyClass 赋予它自己的每个实例 value 属性，如下所示：

function MyClass() {
    this.value = null;
}

但这实际上并没有达到我们想要的效果，因为 this.value 只是引用原型的值：我们没有创建新属性；我们正在设置现有的。不过，Object.defineProperty 使运行时非常明确地知道我们想要创建一个新属性，这样就可以达到目的。