javascript - 获取 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 设置为返回该值，而不是实际存储在输入中的值，从而允许您修改它而无需再次调用 getter 和 setter。