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

【问题标题】：Passing argument to the function inside the object in Javascript在Javascript中将参数传递给对象内部的函数
【发布时间】：2020-11-19 15:42:38
【问题描述】：

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

这是我的功能

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

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

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

【问题讨论】：

你的意思是传递参数到，而不是从？
你需要在你的代码中有一个高阶函数才能解决你的问题
@GirkovArpa 谢谢。是的，打错了那个位
@SaymoinSam 到底在哪里？

标签： javascript dom dom-events javascript-objects

【解决方案1】：

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

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

spacing.onchange(arg);

【讨论】：

谢谢，但是想象一下有 100 个对象，比如间距。手动为它们中的每一个添加功能很困难

【解决方案2】：

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

【讨论】：

【解决方案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*/);

【讨论】：

感谢您的帮助。我认为这是最方便的方式
是的，这是 JavaScript 开发人员在这种情况下的常用方式

【解决方案4】：

试试这个：

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

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

【讨论】：