Javascript对象未定义

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

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

错误：

未捕获的TypeError:无法读取未定义的属性“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

---

您在分配给

chatbox

的对象文本中使用了

chatbox

，但由于尚未定义chatbox，因此该操作无效。
这个未捕获的错误使整个

chat.js

脚本的执行停止，这就是为什么

chatbox

在以下脚本中也是

未定义的

因此，从
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.
      };

})();

因此，
chatbox
显然是
未定义的
，这意味着您的脚本没有加载，或者您在其中出错。您可以通过在chat.js的末尾添加
console.log
之类的内容来检查您的代码是否加载了吗？它是100%加载，在调用chat.setListenUrl之前，我在chat.js中添加了console.log，它以正确的顺序出现
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.
      };

})();