Vanilla JS全局函数内嵌套函数独立调用及预定义函数使用咨询

问题一：你的FEGlobal实现是否正确？ #

整体结构没问题，但存在一处明显问题：

• FEHomepage.Cursor里直接调用mouseOver()和mouseOut()，如果这两个函数未在全局作用域定义，会直接抛出「未定义」的错误。
• FEMedia.Init里用this调用自身的MouseOver和MouseOut是正确的——当FEMedia.Init作为对象方法调用时，this指向FEMedia对象，而对象字面量的所有属性初始化后都能被this访问，不受内部定义顺序影响。

问题二：如何在自定义mouseOver/mouseOut前，就在Cursor中调用（绑定）它们？ #

你需要的是不受定义顺序影响的事件处理函数绑定，推荐两种方案：

方案一：将mouseOver/mouseOut作为FEHomepage的方法

对象字面量初始化后所有属性都会存在，因此不管这两个方法在Cursor之前还是之后定义，都能通过this访问到：

var FEGlobal = {
  FEHomepage: {
    Init: function () {
      this.Cursor();
    },
    Cursor: function () {
      const projectOriginal = document.querySelectorAll("#project__original");
      projectOriginal.forEach((element) => {
        // 通过this访问当前对象下的事件处理方法
        element.addEventListener("mouseover", this.mouseOver, false);
        element.addEventListener("mouseout", this.mouseOut, false);
      });
    },
    // 自定义鼠标移入逻辑
    mouseOver: function () {
      console.log("鼠标移入元素");
      // 你的业务代码
    },
    // 自定义鼠标移出逻辑
    mouseOut: function () {
      console.log("鼠标移出元素");
      // 你的业务代码
    }
  },
  FEMedia: {
    Init: function () {
      this.MouseOver();
      this.MouseOut();
    },
    MouseOver: function () {},
    MouseOut: function () {},
  },
  BEGlobal: { Init: function () {} },
};

方案二：用函数声明定义全局mouseOver/mouseOut

函数声明具有「变量提升」特性，会被提升到当前作用域顶部，因此即使写在Cursor之后，也能在Cursor中正常绑定：

// 函数声明会自动提升，Cursor可直接访问
function mouseOver() {
  console.log("鼠标移入元素");
  // 你的业务代码
}
function mouseOut() {
  console.log("鼠标移出元素");
  // 你的业务代码
}

var FEGlobal = {
  FEHomepage: {
    Init: function () {
      this.Cursor();
    },
    Cursor: function () {
      const projectOriginal = document.querySelectorAll("#project__original");
      projectOriginal.forEach((element) => {
        element.addEventListener("mouseover", mouseOver, false);
        element.addEventListener("mouseout", mouseOut, false);
      });
    },
  },
  FEMedia: {
    Init: function () {
      this.MouseOver();
      this.MouseOut();
    },
    MouseOver: function () {},
    MouseOut: function () {},
  },
  BEGlobal: { Init: function () {} },
};

注意：你原代码中在addEventListener里写的function mouseOver() {}是命名函数表达式，这个函数名仅能在函数内部访问，无法外部复用，不符合你自定义函数的需求，不建议使用。

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