在 Javascript 中将参数传递给对象内部的函数

Question

我很确定以前有人问过这个问题，但我找不到与我的案例相关的任何内容。

这是我的函数

function change(prop) {
    document
      .querySelector("img")
      .style.setProperty(`--${prop}`, `${this.value}px`);
  }

  spacing.onchange = change;
  blur.onchange = change;

我正在努力将参数传递给 change 函数，因为如果我这样做 spacing.onchange = change("prop") 函数将立即执行。我想避免使用 addEventListener。那么问题来了，如何将参数传递给我的函数？

Answer 1

尝试将变量设置为等于函数定义。

spacing.onchange = function change(prop) {
    document
      .querySelector("img")
      .style.setProperty(`--${prop}`, `${this.value}px`);
  }

spacing.onchange(arg);

Answer 2

spacing.onchange = change.bind(spacing, 'prop');

Answer 3

你可以通过使用高阶函数特征来解决

function change(prop) {
  return function() {
    document
      .querySelector("img")
      .style.setProperty(`--${prop}`, `${this.value}px`);
  }
}

// for example
spacing.onchange = change(/*Your prop*/);
blur.onchange = change(/*Your prop*/);

Answer 4

试试这个：

function onChanges (variables,props) {
variables.forEach((variable, index) => {
variable.onChange=function(event){
    return change(props[index]);
}
});
}

onChanges([spacing,blur],[prop1,prop2]);

在 Javascript 中将参数传递给对象内部的函数

Passing argument to the function inside the object in Javascript

javascript

dom

javascript-objects

dom-events