对象键存在于函数调用之外，但不在函数作用域内

Question

我正在使用fabric.js，并且在某一时刻我使用了以下代码：

canvas.on("object:modified", (opt) => {
  console.log(opt.action); //="scale"
  handleScaled(opt);
});

但是在handleScaled函数中opt.action未定义：

function handleScaled(opt) {
  console.log(opt.action) //=undefined
  console.log(opt) //displays the whole opt object but there is no "action" in it
  //further handleScaled code
}

console.log(opt.action) 在函数调用之前会正确显示“scale”，但是当我在 handleScaled 中调用相同的内容时，opt.log(opt.action) 会正确显示“scale”。操作未定义。

为什么opt.action似乎不存在于被调用函数的范围内，但却恰好在调用之前存在？

正确的工作代码仅在操作为“scale”时调用handleScale：

canvas.on("object:modified", (opt) => {
  if (opt.action === "scale") {
    handleScaled(opt);
  }
});

Answer 1

在您的代码中，当您在调用 handleScaled 函数之前记录 opt.action 时，它会正确显示“scale”，因为它正在访问 action传递给 canvas.on 事件处理程序的回调函数中 opt 对象的 code> 属性。当您在 handleScaled 函数中记录 opt.action 时，它显示为 undefined，因为 opt 对象被传递给handleScaled 函数是该对象的另一个实例。它没有 action 属性，因为它与之前记录的 opt 对象不同。

要使 opt.action 可以在 handleScaled 函数中访问，您可以像这样修改代码：

canvas.on("object:modified", (opt) => {
  console.log(opt.action); //="scale"
  handleScaled(opt);
});

function handleScaled(opt) {
  console.log(opt.action); // "scale" (should display correctly)
  // further handleScaled code
}

通过将 opt 对象直接传递给 handleScaled 函数，您可以在函数作用域内保留对其属性的访问权限。确保传递给 handleScaled 的 opt 对象包含预期的 action 属性。