获取 input.value 错误的设置描述符

Question

var inp = document.querySelector('input');
Object.defineProperty(inp, "value", {
    get: function() {
      console.log('getter');
      return this.value;
    },
    set: function(value) {
       console.log('setter');
       this.value = value + '1';
    }
});

我想用设置的输入值编写我的逻辑，但是当我尝试获取或设置值时，这段代码不起作用，无限循环；

我如何根据更改值执行自定义处理程序？（我需要改变值，这样：input.value="custom"，没有input.setValue（"custom"）！）

Answer 1

你可以这样做：

var inp = document.querySelector('input');

function createGetSetValue( inputElement ){
  var value = inputElement.value;
  Object.defineProperty( inputElement, "value", {
    get: function(){ return value; },
    set: function( v ){ value = v + '1'; }
  });
  return inputElement;
};

createGetSetValue( inp );

inp.value = 10;
console.log( inp.value ) // Logs 101

<input value="2" />

因为当您使用 this.value = x 时，您正在再次调用 setter （导致无限循环）。这将独立存储值并将 getter 和 setter 设置为 return that 值而不是实际存储在输入中的值，允许您无需再次调用 getter 和 setter 即可对其进行修改。

获取 input.value 错误的设置描述符

get set descriptors for input.value error

javascript

frontend