javascript - 避免在嵌套函数 jQuery 中使用 _this

Question

我正在尝试整体改进我的代码，尽管以下代码确实有效，但我想避免使用 _this(对我来说这是一种笨拙的方式)，并开始使用 .call/.apply 或 .bind 来在以下示例中设置此上下文。

这是 jsfiddler 的代码和链接 link .

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

var ButtonEffect, button;


Function Constructor
ButtonEffect = function (elem) {
    this.button = $( elem );
};

//Prototype Chain
ButtonEffect.prototype = {
    addEffect : function (ref) {
        return $(this.button, ref).addClass('custom-effect-1');  
    },
    btnObserver : function () {
        //Don't want to use this approach 
        var _this = this;
        this.button.on({
            click : function () {
                //Want to call addEffect without using _this/that #hack             
                _this.addEffect($(this));

            }
        });
    }

};

button = new ButtonEffect('.my-button');
button.btnObserver();


(window, window.jQuery));

这是我提出的另一个解决方案 link

Answer 1

似乎更适合使用内置的 jQuery 方法将数据传递给事件处理程序，这样 this 仍然引用处理程序中的元素

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

    var ButtonEffect, button;

    ButtonEffect = function (elem) {
        this.button = $( elem );
    };

    ButtonEffect.prototype = {
        addEffect : function (ref) {
            return $(this.button, ref).addClass('custom-effect-1');  
        },
        btnObserver : function () {
            this.button.on( {
                click : function (e) {
                    e.data.scope.addEffect($(this));
                }
            }, {scope: this});
        }

    };

    button = new ButtonEffect('.my-button');
    button.btnObserver();


}(window, window.jQuery));

FIDDLE