Question

我正在尝试制作一个闲置的“游戏”，但遇到了这个问题。我想用一个事件监听器来调用一个函数，该监听器接受了一个变量并基本上添加了1（运行时）：

const add = (x) =>{
    x = x + 1
}
foo.addEventListener("click", function(){add(var)})

我检查了在函数内更改变量的方法是通过return函数；但是，此操作无法在这里进行，因为我无法返回到事件监听器。请帮助

Answer 1

通过仍然使用值（数字）作为函数的arg的解决方案

// The function could return the result like so:
const add = (x) => {
  return x + 1;
}

var x = 5;
var foo = document.getElementById("foo");

// The caller should update "x" by the result of function:
foo.addEventListener("click", function () { 
  x = add(x); 
  console.log("x after click is: ", x);
});   
console.log("original x is: ", x);

<button id="foo">click me (function with Number (value))</button>

使用对象/引用代替值作为函数的arg的解决方案

您可以使用Object代替Number或String（或原始类型）值作为函数参数，以便函数中的修改通过引用来更新对象（通过传递Number或String值是不可能的）。 /> 参见https://medium.com/nodesimplified/javascript-pass-by-value-and-pass-by-reference-in-javascript-fcf10305aa9c

const add = (xObject) => {
  if (!xObject || !xObject.count) {
    // Not a valid object
    return;
  }
  xObject.count++; // obj = obj + 1
}

let xObject = { count : 5 };
let foo = document.getElementById("foo");
foo.addEventListener("click", function () { 
  add(xObject); 
  console.log("number after click is: ", xObject);
});   
console.log("original number is: ", xObject);

<button id="foo">click me (function with object (reference))</button>

Answer 2

在Javascript中，所有基本类型（numbers，strings等）均按值传递，除了 { {1}} 。 here有一个很好的解释。因此，您无法做我想做的事情，并且我想您想通过objects传递变量。但是，您可以做的一件事（不建议使用）是使用全局value of the reference对象通过其名称访问全局变量。

C-like reference

window

Answer 3

您可以采用另一个变量y并存储加1的值。单击后即可访问。

var y=0;
 const add = (x) => {
        y = 1 + y;
    }
    var foo = document.getElementById("foo");
    foo.addEventListener("click", function () { add(); console.log(y) });

<button id="foo">click me</button>

更改eventListener调用的函数内部的变量不起作用

3 个答案: