javascript - jQuery Boilerplate - 无法访问 "this"范围

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 8 年前。

我正在尝试使用 jQuery Boilerplate 编写我的第一个插件。我遇到的问题是我无法访问 this一旦我尝试处理事件，我认为是由于variable shadowing 。这似乎是 jQuery Boilerplate 的常见用例，所以我猜我的做法是错误的。

我在这里发现了两个类似的问题:

1. jQuery plugin object: attached an event handler via .on() and now have a scope issue of this. (the main plugin object) - 没有答案
2. Javascript scoping Issue using JQuery Boilerplate - 没有回答我的问题

我创建了一个最小示例来演示该问题。

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

插件

(function($, window, document, undefined) {
    'use strict';

    var pluginName = 'elementValueLog',
            defaults = {};

    function Plugin(element, options) {
        this.element = element;
        this.$element = $(element);
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    $.extend(Plugin.prototype, {
        init: function() {
            this.$element.on('click', this.doLog);
        },
        doLog: function() {
            // HERE: I can't figure out how to access the Plugin "this" scope
            // I want to be able to use "element", "$element", "settings", etc.
            console.log(this.$element.val().trim());
        }
    });

    $.fn[pluginName] = function(options) {
        this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
        return this;
    };
}(jQuery, window, document, undefined));

使用插件

$(document).ready(function() {
    $('li').elementValueLog();
});

<小时/>

解决方案

我更愿意将其添加为答案，但被标记为“重复”会阻止这种情况。在尝试了另一篇文章的答案中显示的几种方法后，我找到了解决方案。我个人认为我的问题足够具体，可以独立存在，因为另一篇文章的“规范”答案相当广泛。

对于browsers that support bind ，init函数可以这样改变:

init: function() {
    this.$element.on('click', this.doLog.bind(this));
},

因为我需要支持 IE 8，所以我将使用 jQuery.proxy :

init: function() {
    this.$element.on('click', $.proxy(this.doLog, this));
},

doLog然后函数可以引用 this.element , this.$element , this.settings等

基于 Jeff Watkins 的回答:

init: function() {
    var plugin = this;
    var doLog = function() {
        console.log(plugin.$element.val().trim());
    };
    this.$element.on('click', doLog);
},

此解决方案的优点是保留 this上下文，同时授予对插件的 this 的访问权限上下文。

Answer 1

“this”与您在堆栈中的位置相关，因此事件中的“this”实际上是事件(如果有意义的话)。这是一个常见的编程概念。

如果您需要在其上调用某些内容，我经常使用“this”(即调用者)的缓存版本。

即

$.fn[pluginName] = function(options) {
    var caller = this;
    this.each(function() {
        if (!$.data(caller, "plugin_" + pluginName)) {