JavaScript中如何获取函数调用方？createStuff绑定点击事件未触发日志问题

问题核心原因说明 #

createStuff 仅会在页面body加载完成时执行一次，它的作用是给按钮注册点击事件的回调函数，这个注册动作完成后createStuff的执行就结束了。后续点击按钮时，只会触发已经注册好的notes函数，不会重新执行createStuff，因此看不到createStuff的日志输出是完全正常的表现，你的代码本身没有问题。

查看函数调用方的实现方法 #

如果需要确认函数的调用来源，可以用以下两种通用方案：

• 使用console.trace()：在目标函数内加入这行代码，控制台会完整打印当前函数的调用栈链路，能清晰看到完整的调用来源信息，兼容严格模式，是最推荐的方案
• 非严格模式下可以使用arguments.callee.caller：会直接返回调用当前函数的函数引用，打印即可查看调用方信息

你可以直接修改notes函数验证效果：

function notes() {
  // 新增：打印notes的完整调用栈
  console.trace("notes 函数调用栈：");
  // 非严格模式下可以加这行看调用方
  // console.log("调用方为：", arguments.callee.caller);
  console.log("gets called inner ---notes");
 
  const li = document.createElement("li");
  const liText = document.createElement("textarea");
  liText.setAttribute("cols", 12);
  liText.setAttribute("rows", 6);
  li.appendChild(liText);
  const ul = document.querySelector("ul");
  ul.appendChild(li);
}

修改后点击按钮，就能在控制台看到notes是由浏览器的点击事件派发逻辑触发的，和createStuff没有调用关系。

如果你确实需要点击按钮时也执行createStuff内的逻辑，直接把对应逻辑封装成公共函数，在notes内调用即可，或者直接给按钮绑定多个事件回调。

内容的提问来源于stack exchange，提问作者herbert mühlex