javascript - jQuery 尚未准备好，但仍在实例化

Question

我正在使用 jQuery 类插件:

jQuery(document).ready(function($) {
    window.SSK.calendar = new(Class.extend({
    filter_by_filtered_names: function() {
      console.log('foobar!');
    },
      init: function() {
        if ( window.location.href.match(/name_filters/) ) {
          SSK.calendar.filter_by_filtered_names();
        };
      }
    }))
});

由于某种原因，这会在加载时返回:

SSK.calendar is undefined

这告诉我插件类在它自己的调用之前没有加载。确实很奇怪。好奇是否有人知道补救措施？

Answer 1

这种行为对我来说似乎很有意义，即使我不知道 Class 是如何工作的:

Class.extend(...) 创建一个新的构造函数(我假设)。 new 执行构造函数，而构造函数又调用 init。结果分配给window.SSK.calendar。您会看到，init 在实例化时被调用，并且这发生在将实例分配给 window.SSK.calendar 之前。

这是一个简化的示例:

function MyClass() {
    this.bar = 'baz';
    console.log(foo.bar);
}

var foo = new MyClass();

这将会失败，因为在调用构造函数时，foo 仍然是未定义。该实例是函数调用的返回值，因此foo不能在调用之前包含对实例的引用。

您只需使用 this 引用实例即可解决您的问题:

init: function() {
    if ( window.location.href.match(/name_filters/) ) {
    // better in this case: if(/name_filters/.test(window.location.href))
        this.filter_by_filtered_names();
    };
}

插件的文档应该提到如何从方法内部引用实例。