javascript - jQuery 多实例插件在 setTimeout 中使用 "this"

Question

我正在尝试编写一个新插件，可以在同一页面内的多个元素上初始化，每次都使用不同的选项，例如:

$('#id').plugin({ option:true });
$('#id2').plugin({ option:false });

我正在使用来自 jqueryboilerplate.com ( https://github.com/jquery-boilerplate/jquery-boilerplate ) 的样板。我明白(至少我认为我明白!)问题是在匿名函数的范围内(这里，在 setTimeout 内)“this”指的是窗口。因此，在下面，第一次记录输出，但第二次则不记录:

// Avoid Plugin.prototype conflicts
$.extend(Plugin.prototype, {
    init: function () {
        console.log(this.settings.propertyName);
        setTimeout(function(){
            console.log(this.settings.propertyName);
        }, 1000);
    }
});

在其他地方，this.settings.propertyName 设置为“value”。 Console.log结果是:

value
Uncaught TypeError: Cannot read property 'propertyName' of undefined

例如，如果我设置 window.prop = this.settings.propertyName 和 console.log window.prop，则可以，但问题是可能有许多实例同时运行。

我已经阅读了很多与此主题相关的问题，但似乎没有一个问题真正解决了这种特殊情况。如果有人能给我一个清晰的示例，说明如何在使用样板或类似内容的 jQuery 插件上下文中执行此操作，我将不胜感激。请原谅我的菜鸟，谢谢!!

Answer 1

捕获this上的闭包:

$.extend(Plugin.prototype, {
    init: function () {
        var _this = this;
        console.log(this.settings.propertyName);
        setTimeout(function(){
            console.log(_this.settings.propertyName);
        }, 1000);
    }
});