jQuery $.proxy 范围

Question

我有以下代码：

bindEvents: function() {
    $('#weight').click($.proxy(function(){
        this.changeWeight($('#weight').is(':checked'));
    },this));
    $('#produce').change($.proxy(function(){
        this.changeProduce();
    },this));
    $('.help-gtin').click($.proxy(function(){
        if ($('#help-gtin').is(':hidden')) {
            $('#help-gtin').slideDown();
        } else {
            $('#help-gtin').slideUp();
        }
        this.refreshGtin();
    },this);

    $('[name="order_production"]').click($.proxy(function(){
        this.changeProduction();
    },this));

},

我如何减少这个重复代码$.proxy 调用，因为bindEvents 内的所有方法都需要在this 范围内调用？

Answer 1

利用他们已经是closures这一事实，设置一个等于this的变量，然后使用它：

bindEvents: function() {
    var self = this; // <==== Set the variable

    $('#weight').click(function(){
        // v--- Use it (throughout)
        self.changeWeight($('#weight').is(':checked'));
    });
    $('#produce').change(function(){
        self.changeProduce();
    });
    $('.help-gtin').click(function(){
        if ($('#help-gtin').is(':hidden')) {
            $('#help-gtin').slideDown();
        } else {
            $('#help-gtin').slideUp();
        }
        self.refreshGtin();
    });

    $('[name="order_production"]').click(function(){
        self.changeProduction();
    });

},

您在bindEvents 中定义的所有函数都“关闭”了对bindEvents 的调用上下文，并且可以访问与该调用关联的局部变量。与this 不同，这些变量不会根据函数的调用方式而改变。

这还有一个好处是你可以在事件处理程序中使用this，它的jQuery含义是你钩住事件的元素（这可以节省你再次查找它，例如在你的click处理程序中#weight)。