访问外部 js 文件中的内联 js 对象答案

【问题标题】：Access inline js object in an external js file访问外部 js 文件中的内联 js 对象
【发布时间】：2016-12-09 17:53:46
【问题描述】：

我有一个内联 js 对象，我试图在外部 js 文件中访问它，如下所示：

内联js：

      <script type="text/javascript">  
          $(function(){ 
               var person = {firstName:"John", lastName:"Doe", age:46};
          });
     </script>

外部js：

$(function() {
    var name = person.firstName;
});

当我运行此代码时，我收到一个 js 错误，提示未定义人员。外部文件是在内联 js 之后调用的。内联js在页面顶部，外部js在页面底部链接，如下所示：

<script src = "js/example.js"></script>

任何人都可以对此添加一些见解吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这是一个简单的范围问题。您正在声明函数的person inside。在该功能之外，您无法访问person。在此处查看示例：https://jsfiddle.net/7ksaethr/1/

要解决此问题，请在函数外部声明 person，然后将其设置在内部：

var person = null;
$(function(){ 
    person = {firstName:"John", lastName:"Doe", age:46};
});

$(function() {
    var name = person.firstName;
});

示例：https://jsfiddle.net/7ksaethr/2/

【讨论】：

我不确定你为什么对我投了反对票。我的回答并没有错，您刚刚提供了不提供隐式范围的替代解决方案。如果您更喜欢这样做，请提供您自己的答案。
谢谢，但是在 dom 中，在 js 脚本的第一段中声明了 person。而且我不是那个对你投反对票的人......
你误会了@vslat。如果您在函数内部使用var 声明变量，它只能在该函数的内部访问。您必须在函数的外部声明它，就像我在我的示例中所做的那样。另一种方法是在声明时不使用var，因为这会在当前范围内实例化变量。
我知道你来自哪里，我会试一试。谢谢
@Santi 对不起，但你误会了.. OP 中的函数是一个现成的函数快捷方式$(function(){}).. 所以你的答案变得不必要:(

【解决方案2】：

你需要看看scope这个概念以及javascript是如何实现它的。

顺便说一句，在您的情况下，person 变量在作为参数传递给 $() 函数的 anonymous callback 内声明，因此，只有该范围及其子范围可以访问该变量。

因为variable 是private，您需要将其公开到其父作用域：window.person 而不是var person。
因为variable 在回调中声明，您需要等待jQuery 触发它，然后再尝试访问person。

$(function() {
  window.person = { name: 'Giuseppe' };
});

// this should log undefined
console.log('person is not defined yet', window.person);

$(function() {
  console.log('person', window.person);
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

所以我想出了如何做到这一点。首先我添加了一个空数组，像这样的jsp：

<script>
    window.names= [];
</script>

然后在 jsp 的 for each 循环中，我像这样填充空数组（此方法适用于从控制器返回的动态列表）：

        <script>
            window.names.push({
                names: '${name.allNames}'
            });
        </script>

如果您的列表不是动态的，您可以执行以下操作：

    <script>
        window.names.push({
            names: '${ken, james, jen, emily}'
        });
    </script>

然后在你的外部 js 中你可以像这样访问列表：

(function( detail, $, undefined, index) {
        'use strict';
        var names= detail[0].allNames;
})(names, jQuery);

【讨论】：