Javascript 在对象中存储函数名并稍后调用

我正在开发一个单页应用程序，到目前为止，我已经成功创建了一个系统，可以轻松地在页面之间切换，现在我想我需要一种在打开某个页面时调用特定函数的方法

对于每个页面，我都声明了一个

函数，例如
#page1
具有
page1_func
，
#page2
具有
page2_func
等等

所有页面都以这种方式存储

var appPages  = {
    "page1": {
        "id": "#page1",
        "title": "Page 1 Title",
        "callback": page1_func
    },

    "page2": {
        "id": "#page2",
        "title": "Page 2 Title",
        "callback": page2_func
    }
};

还有另一个函数负责导航，当使用调用该函数时，它会获取关于该页面的信息，即其
标题
和
id
，以更新DOM

我还希望该函数能够调用页面的
回调
属性中的函数

function NavigateToPage( page )  {
    ..
    ..
    appPages[ page ].callback( "some args" );
}

但是，这不起作用，因为我在脚本末尾声明函数，但据我所知，在结尾或开头声明函数并不重要，它始终可用，尽管在我的情况下，控制台告诉我未定义
page1_func

我需要帮助来更好地解决这个问题
不过这是可行的


const appPages={
第1页：{
id:“#第1页”，
标题：“第1页标题”，
回拨：第1页，
},
第2页：{
id:“#第2页”，
标题：“第2页标题”，
回拨：第2页，
}
};
函数triggerCallback（第页）{
appPages[page]。回调（'args…'）；
}
triggerCallback（“第1页”）；
功能页面1_fn（arg）{
文件写入（arg）；
}
功能页面2_fn（arg）{
文件写入（arg）；
}
但这是可行的


const appPages={
第1页：{
id:“#第1页”，
标题：“第1页标题”，
回拨：第1页，
},
第2页：{
id:“#第2页”，
标题：“第2页标题”，
回拨：第2页，
}
};
函数triggerCallback（第页）{
appPages[page]。回调（'args…'）；
}
triggerCallback（“第1页”）；
功能页面1_fn（arg）{
文件写入（arg）；
}
功能页面2_fn（arg）{
文件写入（arg）；
}
功能声明已挂起。即使您声明它们，它们也将可用。eofObjects可以具有称为方法的函数。只需在对象中定义一个函数。并用点或括号表示变量。如果用不同的
标记声明它们。。。我不确定。@user202729是的，这就是问题所在，将它们放在文件中可以正常工作。函数声明被挂起。即使您声明它们，它们也将可用。eofObjects可以具有称为方法的函数。只需在对象中定义一个函数。并用点或括号表示变量。如果用不同的
标记声明它们。。。我不确定。@user202729是的，这就是问题所在，将它们放在文件中可以正常工作。这确实有效。我将我的函数声明移动到了创建
appPages
对象的同一个文件中，现在它可以工作了，我认为问题在于将它们放在不同的文件中。@DeepakKamat你把page1\u fn或page2\u fn放在HTML文件的哪里了？我把它放在了另一个JS文件中。我将
appPages
对象放在
main.js
文件中，将
page1\fn
放在另一个js文件
pages.js
@DeepakKamat调用
pages.js
上的
pages.js。我做到了这一点，这对我很有效。这确实有效。我将我的函数声明移动到了创建
appPages
对象的同一个文件中，现在它可以工作了，我认为问题在于将它们放在不同的文件中。@DeepakKamat你把page1\u fn或page2\u fn放在HTML文件的哪里了？我把它放在了另一个JS文件中。我将
appPages
对象放在
main.js
文件中，将
page1\fn
放在另一个js文件
pages.js
@DeepakKamat调用
pages.js
上的
pages.js。我做到了，这对我来说很有效。