Изменение значения свойства объекта с помощью метода

Question

Я как бы новичок в JavaScript и jQuery, но получил некоторый опыт программирования на других языках. Это то, что я писал:

var pageFunctionality = { 
    value: 0, 
    onUpdate: function() { 
     $("#numberOfTimes").html(pageFunctionality.value); 
     console.log(pageFunctionality.value + "!"); 
    }, 
    onBtnClick: function() { 
     this.value++; 
     console.log(this.value); 
     pageFunctionality.onUpdate(); 
    } 
}; 
$(document).ready(function() { 
    $("#btn").click(pageFunctionality.onBtnClick); 
}); 

Проблема заключается в следующем: при входе в «значение» внутри «onBtnClick», это явно возрастает, но потом, когда я вхожу его внутри OnUpdate метода, продолжать быть 0.

Это выход он производит:

1 
0! 
2 
0! 
3 
0! 
4 
0! 

Я надеюсь, что вы можете мне помочь.

Answer 1

У вас есть проблема со значением this в вашем обработчике onBtnClick() из-за способа его вызова из обработчика .click(). По умолчанию jQuery установит this как элемент DOM, к которому вы подключили обработчик событий.

Если вам не нужен доступ к этому DOM элемент в обработчик щелчка, то вы можете изменить свой код на этот:

$(document).ready(function() { 
    $("#btn").click(pageFunctionality.onBtnClick.bind(pageFunctionality)); 
}); 

Использование .bind(), как это будет переопределить значение this быть то, что вы хочу, чтобы это было.

---

Или, так как pageFunctionality одноэлементно, вы могли бы просто прекратить использование this внутри обработчика событий и обратитесь непосредственно к pageFunctionality так:

var pageFunctionality = { 
    value: 0, 
    onUpdate: function() { 
     $("#numberOfTimes").html(pageFunctionality.value); 
     console.log(pageFunctionality.value + "!"); 
    }, 
    onBtnClick: function() { 
     pageFunctionality.value++; 
     console.log(pageFunctionality.value); 
     pageFunctionality.onUpdate(); 
    } 
}; 
$(document).ready(function() { 
    $("#btn").click(pageFunctionality.onBtnClick); 
});