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

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>

努力实现:

On First Event > Caller 1 undefined undefined

On Second Event > Caller 1 Caller 2 undefined

On Third Event > Caller 1 Caller 2 Caller 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>