p5.js中JavaScript函数无法正确修改变量值问题求助

问题根源 #

JavaScript中数字这类基本类型是值传递。你把exampleoutput传给makeButton的outputVar参数时，outputVar只是原变量的一个副本，修改副本不会影响外部的exampleoutput，所以它始终显示0。直接写exampleoutput=1能生效是因为直接操作了全局变量，但这不符合参数传递的需求。

可行解决方案 #

方案1：用对象包裹变量（推荐） #

将需要修改的变量放入对象中，对象属于引用类型，传递时会指向原对象的内存地址，修改对象属性会直接影响原对象：

var outputObj = { value: 0 }; // 用对象包裹目标变量

var makeButton = function (
  x1,
  x2,
  y1,
  y2,
  outputObj,
  haveShape,
  colorR,
  colorG,
  colorB
) {
  mouseClicked = function () {
    if (mouseX >= x1 && mouseX <= x2 && mouseY >= y1 && mouseY <= y2) {
      outputObj.value = 1; // 修改对象属性，同步影响原对象
    }
  };
  if (haveShape === 1) {
    fill(colorR, colorG, colorB);
    rect(x1, y1, x2 - x1, y2 - y1);
  }
};

function draw() {
  background(255, 255, 255);

  makeButton(50, 100, 50, 100, outputObj, 1, 0, 0, 0);
  fill(0, 0, 0);
  text(outputObj.value, 200, 200); // 读取对象属性值
}

方案2：传递修改函数 #

定义一个专门修改目标变量的函数，将这个函数作为参数传入makeButton，点击事件触发时调用该函数：

var exampleoutput = 0;

var makeButton = function (
  x1,
  x2,
  y1,
  y2,
  setOutput,
  haveShape,
  colorR,
  colorG,
  colorB
) {
  mouseClicked = function () {
    if (mouseX >= x1 && mouseX <= x2 && mouseY >= y1 && mouseY <= y2) {
      setOutput(1); // 调用传入的修改函数
    }
  };
  if (haveShape === 1) {
    fill(colorR, colorG, colorB);
    rect(x1, y1, x2 - x1, y2 - y1);
  }
};

function draw() {
  background(255, 255, 255);

  // 传递修改exampleoutput的箭头函数
  makeButton(50, 100, 50, 100, (val) => { exampleoutput = val; }, 1, 0, 0, 0);
  fill(0, 0, 0);
  text(exampleoutput, 200, 200);
}

额外注意 #

多次调用makeButton会覆盖全局的mouseClicked事件，导致只有最后一个按钮生效。如果需要多个可交互按钮，建议将按钮逻辑封装为类，或者在draw函数中统一检测点击与按钮区域的匹配。

内容的提问来源于stack exchange，提问作者Thomas Heger