物件鍵存在於函數呼叫之外，但不在函數作用域內

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 屬性。