调用函数而不重新分配命名参数

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 undefined undefined

在第二个事件上> Caller 1 Caller 2 undefined

在第三个事件上 > 来电者 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、value2 和 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;
}