Как лучше всего объявить переменную в области видимости функции JavaScript?

Оффтоп javascript
1

Привет, народ! У меня возникла проблема с объявлением переменных внутри функции pagination(). Я пытаюсь использовать this, чтобы определить переменные (например, this.parentList), но они почему-то недоступны внутри метода jQuery click. Вот пример кода:

function pagination(element) {
  this.parentList = element.find('ul');
  var items = element.find('li');
  this.itemCount = items.length;
  var itemsPerPage = 3;

  // Остальной код...

  $('.pageLinks').on('click', 'a', function() {
    // this.parentList недоступен здесь
    // Как это исправить?
  });
}

pagination($('.paginationContainer'));

Как мне правильно объявить переменные, чтобы они были доступны во всей функции, включая обработчики событий? Буду благодарен за любые советы!

2

Чел, если хочешь чтобы переменные были видны везде в функции, юзай обычные var в начале. Но есть способ покруче - стрелочные функции. Они сохраняют контекст this:

$('.pageLinks').on('click', 'a', () => {
  // тут this.parentList будет доступен
});

Попробуй так, должно сработать. И да, не забудь про const/let вместо var, они удобнее.

3

Чувак, в твоем случае лучше юзать замыкания. Объяви все переменные в начале функции через let или const. Типа:

function pagination(element) {
  const parentList = element.find('ul');
  const items = element.find('li');
  const itemCount = items.length;
  const itemsPerPage = 3;

  $('.pageLinks').on('click', 'a', function() {
    // тут все переменные доступны
    console.log(parentList, itemCount);
  });
}

Так переменные будут доступны во всех вложенных функциях. Плюс let/const не позволят случайно переопределить переменную. Проверено на своем опыте, работает как часы.

4

слушай, я недавно столкнулся с похожей проблемой. вот что помогло: объяви переменные через var в начале функции, а не через this. типа так:

function pagination(element) {
  var parentList = element.find('ul');
  var items = element.find('li');
  var itemCount = items.length;
  var itemsPerPage = 3;

а потом используй их внутри обработчика click. еще можно сохранить this в переменную self в начале функции:

var self = this;

и юзать self.parentList внутри click. так точно будет работать. удачи с кодом!