Вызов jQuery в экземплярах класса JavaScript ведет к последнему экземпляру

Question

У меня проблема с двумя классами и вызовом jquery.К сожалению, если вызвать метод в одном классе, он думает, что это другой.

Здесь подробно:

Я пишу форму, где пользователь может записать два номера клиента в двух разных полях ввода.Веб-сайт будет запрашивать каждый номер клиента через JQuery AJAX и отображать детали из номеров клиентов.

Итак, я написал класс для того, чтобы не дублировать код и назначать поведение каждому полю ввода.

CustomerData = function(settings){
    this.name = '';        
    this.street = '';
    this.zipcode ='';
    this.town = '';
    this.inputField = settings.inputfield;
    this.init();
}
CustomerData.prototype.init = function() {
    this.associateClassWithUi();
}

//here I assign the class with the inputfield via jQuery
CustomerData.prototype.associateClassWithUi = function() {
    _this = this;
    console.log("associate " +this.inputField);
    $(this.inputField).focus(function() {
        console.log(' focus on '+_this.inputField);
    });
    $(this.inputField).blur(function() {
        customerId = $(this).val();
        console.log("blur event " + _this.inputField);
        if(customerId != ''){
            _this.main(customerId);
        } else {
            _this.setEmpty();
            _this.propertiesToUi();   
        }
    });
}

Я определяю классы следующим образом:

var DataCustomer1 = new CustomerData({
    inputField: '#customer1'
});

var DataCustomer2 = new CustomerData({
    inputField: '#customer2'
});

console.log дает мне следующее:

associate #customer1
associate #customer2

Но нажимая на поля ввода (# customer1 и # customer2) Я всегда получаю это

focus on #customer2
focus on #customer2
focus on #customer2

Конечно, если я изменю порядок создания экземпляров

var DataCustomer2 = new CustomerData(...);
var DataCustomer1 = new CustomerData(...);

, каждый из них думает, что он является customer1

Что мне не хватает?

Answer 1

Используйте var _this = this;в противном случае он объявляется глобально и каждый раз перезаписывается.

Answer 2

Когда вы объявляете переменную без var, она всегда становится глобальной. Если у вас есть этот HTML:

<ul>
    <li id="customer1">Customer 1</li>
    <li id="customer2">Customer 2</li>
</ul>

Следующий код работает как положено:

CustomerData = function(settings){
    this.inputField = settings.inputField;
    this.init();
}
CustomerData.prototype.init = function() {
    this.associateClassWithUi();
}

CustomerData.prototype.associateClassWithUi = function() {
    var _this = this;
    console.log("associate " +this.inputField);
    $(this.inputField).click(function() {
        console.log('click on '+_this.inputField);
    });
}

var DataCustomer1 = new CustomerData({
    inputField: '#customer1'
});

var DataCustomer2 = new CustomerData({
    inputField: '#customer2'
});

Более подробную информацию о переменных JavaScripts можно найти здесь