Javascript 对象未定义

Question

我的代码一直告诉我我创建的对象未定义。

我正在加载几个 JS 文件然后调用函数但它出错了

错误:

Uncaught TypeError: Cannot read property 'setListenUrl' of undefined

代码如下:

<script src="{{ URL::asset('javascript/chat.js') }}"></script>

<script>
    $(function() {
        chatbox.setListenUrl('{{ URL::route('chat.listen') }}');
        chatbox.setSendURL('{{ URL::route('chat.send')  }}');

        @if(Auth::check())
        chatbox.setAuth(true);
        @endif

        @if(isset($game))
        chatbox.setGame('{{ $game }}');
        @endif

        chatbox.init();
    });
</script>

聊天.js

var chatbox = {

...
}

完整脚本代码 http://pastebin.com/7LhWq01U

聊天.js http://pastebin.com/nNgTtME1

Answer 1

您正在使用 chatbox在您分配给 chatbox 的对象字面量中，这不起作用，因为聊天框尚未定义。
那个 Uncaught Error 使得你的整个 chat.js 的执行脚本停止，这就是为什么 chatbox也是undefined在以下脚本中。

因此，从 chat.js 的第 17 行开始, 你必须找到一种方法来引用 $chatbox在你的对象的多个地方。
当您想在对象字面量中引用先前定义的属性时，这是 JavaScript 中的常见问题。但问题是你不能，所以现在最快的解决办法是声明一个 $chatbox。对象外部的变量并从内部引用它。

既然左右声明全局变量肯定是不好的做法，这个问题可以通过以下两种方式更好地解决:

构造函数

您创建一个 constructor function然后使用关键字 new 创建对象的实例.这提供了对象初始化代码的封装，并允许您在需要时轻松创建多个聊天框对象。

function Chatbox() {
     var $chatbox = $('.chatbox');
     this.$chatbox = $chatbox;
     this.$input = $chatbox.find('.input input');          
     //...
}

var chatbox = new Chatbox();

如果您知道您的对象不会有多个实例，那么构造函数模式不会提供太多，可能只是额外的语法负担，因此您可以使用更轻的封装技术:

立即调用的函数表达式(IIFE)

您将所有对象初始化代码放在一个匿名函数中，该函数在最后返回对象，并在变量声明语句中调用该函数，该语句还封装了您在初始化对象时需要声明的任何变量。

var chatbox = (function() {
      var $chatbox = $('.chatbox');

      return {
           $chatbox: $chatbox,
           $input: $chatbox.find('.input input'),
           //           ^ This references the outer $chatbox variable, not this
           //             object's $chatbox property.
      };

})();