在不重新分配命名参数的情况下调用函数

Question

我有一个命名参数的函数。

我试图从不同的事件调用相同的函数，而不覆盖以前分配的其他事件的值。

我已经尝试将先前单击的按钮的值存储在变量中，但这不起作用。

有没有办法调用函数并一次分配一个参数而不覆盖其他参数？

function mainFun({
  val1,
  val2,
  val3
}) {
  var value1 = val1,
    value2 = val2,
    value3 = val3;
  // console.log(value1, value2, value3);
  console.log(val1, val2, val3);
}

<button onclick="mainFun({val1 : 'Caller 1'})">First Event</button>
<button onclick="mainFun({val2 : 'Caller 2'})">Second Event</button>
<button onclick="mainFun({val3 : 'Caller 3'})">Third Event</button>

试图实现：

在第一个事件>来电者1未定义未定义

在第二个事件>来电者1来电2未定义

在第三个事件>来电者1来电者2来电者3

提前致谢！

Answer 1

您可以将值存储为函数的属性。

function mainFun({ val1 = mainFun.val1, val2 = mainFun.val2, val3 = mainFun.val3 }) {
    mainFun.val1 = val1;
    mainFun.val2 = val2;
    mainFun.val3 = val3;

    console.log(val1, val2, val3);
}

<button onclick="mainFun({ val1: 'Caller 1' })">First Event</button>
<button onclick="mainFun({ val2: 'Caller 2' })">Second Event</button>
<button onclick="mainFun({ val3: 'Caller 3' })">Third Event</button>

如果您不希望将值存储为函数的属性，则可以使用闭包并为同一组用例返回函数。

function mainFun(defaults = {}) {
    return function({ val1 = defaults.val1, val2 = defaults.val2, val3 = defaults.val3 }) {
        defaults.val1 = val1;
        defaults.val2 = val2;
        defaults.val3 = val3;

        console.log(val1, val2, val3);
    };
}

var work = mainFun();

<button onclick="work({ val1: 'Caller 1' })">First Event</button>
<button onclick="work({ val2: 'Caller 2' })">Second Event</button>
<button onclick="work({ val3: 'Caller 3' })">Third Event</button>

Answer 2

value1，value2and和value3变量是你的mainFun函数的本地变量。在每次执行mainFun之后，它们都被垃圾收集。

要实现您想要实现的目标，您需要将以前的参数存储在某处。

有很多可能性：

• 其中一个是全局变量：

let value1, value2, value3;

function mainFun({
  val1,
  val2,
  val3
}) {
    value1 = val1 || value1;
    value2 = val2 || value2;
    value3 = val3 || value3;
   console.log(value1, value2, value3);
  //console.log(val1, val2, val3);
}

<button onclick="mainFun({val1 : 'Caller 1'})">First Event</button>
<button onclick="mainFun({val2 : 'Caller 2'})">Second Event</button>
<button onclick="mainFun({val3 : 'Caller 3'})">Third Event</button>

• 另一种解决方案是将它们存储为函数属性（如Nina Scholz建议的那样）

Answer 3

如果我误解你的问题，请纠正我。但是如果你想存储te值，你必须在函数之外声明它们。目前，您的值仅在您的函数中存活。调用该函数时，将重新创建它们，在函数完成后，它们将再次被删除。

您可以尝试在函数之外声明值，并防止覆盖如下：

var value1, value2, value3;
function mainFun({
  val1,
  val2,
  val3
}) {
   value1 = value1 || val1,
    value2 = value2 || val2,
    value3 = value3 || val3;
  console.log(value1, value2, value3);
}

value1 || val1基本上做的是说'嘿，如果value1已经有价值，那就用它。如果没有，请使用val1。行为与value1 = value1 !== undefined ? val1 : value1相同或更容易：

if (value1 === undefined) {
   value1 = val1;
} else { // obviously not needed
   value1 = value1;
}