Question

我的问题是jquery回调中'this'的上下文。

$('input').on('change', function(){
    this.number = $(this).val();
});

上面，这是输入元素，通常是我们想要的“这个”。问题是当它成为下面一个对象的方法时。

// constructor pattern
var View = function(){
    this.number = 0;
};

// method definition
View.prototype.foo = function(){
    $('input').on('change', function(){
        // former this should be the object instance and 
        // the latter should be the html element.
        this.number = $(this).val(); 
    });
};

要更改函数的上下文，可以使用Function.bind（），如下所示。

View.prototype.foo = function(){
    $('input').on('change', function(){
        this.number = $(this).val(); 
    }.bind(this)); // bind the callback to the instance of View object
};

上面的工作直到$（this）.val（）从那时起$（this）想要输入元素而不是View对象。

为了以临时方式解决这个问题，我可以明确地将其设置为实例的名称，如下所示。

View.prototype.foo = function(){
    $('input').on('change', function(){
        // explicitly set this to be the instance
        // while sacrificing generality since code breaks when the object name is not 'view' 
        view.number = $(this).val(); 
    }); 
};

var view = new View();

正如您所看到的，这可以解决这种模糊性，但也会影响一般性，因为当对象名称不是“视图”时代码会中断。

鉴于上述情况，如何在不损害一般性的情况下使代码解决歧义？请建议一个方法。谢谢。

Answer 1

许多lib /框架中使用的常用方法如下：

View.prototype.foo = function(){
    var self = this; // store this as a local variable
    $('input').on('change', function(){
        self.number = $(this).val(); 
    }); 
};

在jquery回调中含糊不清的'this'

1 个答案: