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，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;
}

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

3 个答案: