Ошибка при создании глобальной переменной в классе Javascript

Question

Я пытаюсь создать переменную страницы, которая может использоваться моим классом Scroller для бесконечной прокрутки.Мне нужно, чтобы он был глобальным, я думаю, чтобы он запоминал себя вне функции ajax.

class Scroller {
  window.page = 1;

  constructor(){
    this.events();
  }

  events(){
    $(document).on("scroll", this.on_scroll.bind(this))
  }

  on_scroll(e){
    var scroll_top = $(window).scrollTop();
    var body_height = $('body').height();
    var win_height = $(window).height();
    var height_diff = body_height - win_height;


    if( (scroll_top+1 >= height_diff) && working==false){
        working=true;
        console.log("greater than diff");
        this.load_more();
    }
    else{
        //console.log(scroll_top);
        //console.log("greater than diff");
    }

}

Я также пытался:

var page = 1;
page = 1;
$page = 1;

все они дают ошибку, обычноошибка синтаксиса.Каков наилучший способ создать глобальную переменную в классе?или любая переменная для передачи вызываемой функции прокрутки.Они мне также нужны, чтобы я мог создать «работающую» переменную, чтобы ajax не загружался несколько раз.

Спасибо за любую помощь

Answer 1

Вы можете либо определить его внутри constructor (я бы предложил)

class Scroller {
  constructor(){
    this.page = 1;
    this.events();
  }
}

, а затем изменить его на this.page = 2 (или как угодно)

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

window.page = 1;
class Scroller {
    constructor(){  
        this.events();
      }
}

Answer 2

Это также работает, как вы просите.Это может быть не рекомендуется!

Глобальные переменные могут вызывать головные боли и утечки памяти.

Это также боль, когда многие работают над одним и тем же кодом.

function notinglobalScope(){
  window["page"] = 1
}
notinglobalScope()


console.log(page)

Лучший способ - хранить ваши данные в отдельном объекте.

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

Он остается чистым и простым в использовании.

var config = {}

function notinglobalScope(){
  config.page = 1
}
notinglobalScope()


console.log(config.page)

Answer 3

Вы можете просто определить его в конструкторе, если он еще не определен:

class Scroller {
    constructor() {
        window.page = window.page || 1;
        this.events();
    }
}

При этом здесь ощущается серьезный запах проекта.Вы также можете просто определить переменную вне класса.

Обратите внимание, что она не должна быть глобальной;Вы можете определить его в самом объекте класса и ссылаться на него как Scroller.page:

class Scroller {
    /* ... */
}

Scroller.page = 1;