javascript - 是否可以重载 native HTMLInputElement 值 getter ？

Question

我想知道是否可以修改 HTMLInputElement 以显示不同于 value prop 返回的内容。

为什么？有时您想要向用户显示一些像string 这样的好东西，但是您想要将ID 发送到服务器。如果您在输入上使用多个逻辑/插件，那么使用额外的假逻辑/插件就会开始出现问题。那为什么不把两者合二为一呢？! =)

我已经注意到可以为 value 属性定义一个 getter。但是我放弃了将更改显示文本的 native setter 功能。 =/

HTML:

<input id="foobar" type="text"/>

JS:

var input = document.getElementById('foobar');
    input.value = 'Mr. Foo Bar';
    input.myHiddenValue = 123;

Object.defineProperty(input, 'value', {
    get: function(){
        return this.myHiddenValue; 
    }
});

所以如果你能告诉我，如果这可能并保留本地 setter 或只是一个愚蠢的深夜想法，请告诉我 xD

Answer 1

虽然我不建议这样做，但您可以使用 Object.getOwnPropertyDescriptor 获取(并缓存) native setter，例如:

(function() {
  var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');

  descriptor.get = function() {
    // do whatever you want to do here
  }

  Object.defineProperty(HTMLInputElement.prototype, 'value', descriptor);  
})();