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

Question

我有一个内联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>

谁能对此添加一些见识？

Answer 1

这是一个简单的范围问题。 您是在函数内部声明person 。 在该功能之外，您无法访问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/

Answer 2

您需要查看scope概念以及javascript如何实现它。

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

1. 因为该variable是私有 variable ，所以您需要将其公开到其父范围： window.person而不是var person 。
2. 由于该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); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 3

所以我想出了办法。 首先，jsp我添加了一个空数组，如下所示：

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

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

        <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);