未定义Javascript对象

Javascript object undefined

本文关键字：对象 Javascript 未定义      更新时间：2023-09-26

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

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

错误：

未捕获的类型错误：无法读取未定义的属性"setListenUrl"

这是代码：

<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

聊天.jshttp://pastebin.com/nNgTtME1

您在分配给chatbox的对象文字中使用chatbox，这不起作用，因为聊天框尚未定义
这个未捕获的错误会使整个chat.js脚本的执行停止，这就是为什么chatbox在以下脚本中也是undefined。

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

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

构造函数函数

创建一个构造函数，然后使用关键字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.
      };
})();
相关文章：