Question

我试图整体改进我的代码，虽然以下代码确实有效，但我想避免使用_this（对我来说这是一种hacky方式），并开始使用.call / .apply或。绑定以在以下示例中设置此上下文。

以下是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

Answer 2

您可以像这样更改代码：

    btnObserver : function () {
        this.button.on({
            click : function (ev) {
                this.addEffect($(ev.currentTarget));

            }.bind(this)
        });
    }

如果不使用ev.currentTarget，

this通常与bind相同。并且bind使得事件处理程序中this的值与bind执行的范围相同。我有fiddle。

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

2 个答案: