如何在JavaScript中将外部函数作为函数参数传入？

没问题，这其实是JavaScript里函数作为一等公民的典型应用场景，完全可以实现你的需求。核心就是直接把外部定义的changeElementStyle函数当作参数传给getElement，同时确保它能正常访问到需要修改的其他样式元素。

基础实现示例 #

先看一个简单的可运行代码示例，清晰展示整个流程：

// 外部定义changeElementStyle，负责修改目标元素+其他元素的样式
function changeElementStyle(targetElement) {
  // 1. 修改传入的目标元素样式
  targetElement.style.fontSize = '18px';
  targetElement.style.border = '1px solid #ccc';

  // 2. 修改其他关联元素的样式（这就是你需要在外部声明的原因）
  const sidebar = document.getElementById('sidebar');
  if (sidebar) { // 加个判断避免元素不存在时报错
    sidebar.style.padding = '10px';
    sidebar.style.backgroundColor = '#f5f5f5';
  }
}

// 定义getElement函数，接收元素ID和样式修改函数作为参数
function getElement(elementId, styleModifier) {
  const target = document.getElementById(elementId);
  if (target && typeof styleModifier === 'function') {
    // 调用传入的外部函数，把目标元素传进去
    styleModifier(target);
  }
  return target;
}

// 调用getElement，直接传入changeElementStyle即可
document.addEventListener('DOMContentLoaded', () => {
  // 确保DOM加载完成后再调用，避免找不到元素
  getElement('main-content', changeElementStyle);
});

关键注意事项 #

• 函数直接传递：JavaScript里函数是一等对象，所以你可以直接把changeElementStyle作为参数传给getElement，不需要额外包装（除非有上下文需求）。
• 依赖可用性：如果changeElementStyle里要修改的其他元素在页面加载完成后才存在，记得在DOM加载完成后再调用getElement（比如用DOMContentLoaded事件），避免找不到元素导致报错。
• 上下文绑定（如果需要）：如果changeElementStyle里用到了this（比如依赖某个对象的属性），可以用bind()来绑定上下文后再传递：

// 假设changeElementStyle是某个对象的方法
const styleController = {
  accentColor: '#ff4400',
  updateStyles: function(targetElement) {
    targetElement.style.color = this.accentColor;
    // 其他样式修改逻辑...
  }
};

// 绑定上下文后传入
getElement('main-content', styleController.updateStyles.bind(styleController));

这样就能完美实现你的需求：外部声明的函数可以被传入getElement，同时每次调用它都能修改其他关联元素的样式。

内容的提问来源于stack exchange，提问作者Gergő Horváth