Неоднозначное «это» внутри обратного вызова jquery

Question

Моя проблема - это контекст «этого» внутри обратного вызова jquery.

$('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 
}; 

Выше работает до $ (это) .val() с тех пор $ (это) хочет входной элемент обратно не объектном.

Чтобы решить эту проблему специальным образом, я могу явно указать это имя экземпляра, как показано ниже.

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(); 
    }); 
};