Question

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

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

错误：

未捕获的TypeError：无法读取属性＆＃39; setListenUrl＆＃39;未定义的

以下是代码：

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

chat.js

var chatbox = {

...
}

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

chat.js http://pastebin.com/nNgTtME1

Answer 1

您在分配给chatbox的对象文字中使用chatbox，但由于尚未定义聊天框，因此无效。这个未被捕获的错误会导致整个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.
      };

})();

Javascript对象未定义

1 个答案:

构造函数

立即调用函数表达式（IIFE）