Javascript ES6 Classes - Метод не может получить доступ к свойству класса, определенному внутри конструктора класса

Question

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

class App {

  constructor() {

    // Get elements from DOM
    const titleBox = document.getElementById('titleBox');
    const navBox = document.getElementById('navBox');
    const navLinks = document.querySelectorAll('.header__listLink');
    const headerTitle = document.getElementById('headerTitle');
    const headerSubtitle = document.getElementById('headerSubtitle');
    const ulNav = document.getElementById('ulNav');
    const ulNavLinks = document.querySelectorAll('.ulNavLink');

    // for each nav link, add an event listener, expanding content area
    navLinks.forEach((link) => {
      link.addEventListener('click', this.clickedLinkState);
    });

  }

  clickedLinkState(e) {

      e.preventDefault();

      titleBox.classList.remove("header__title-box");
      titleBox.classList.add("header__title-box--linkClicked");

      headerTitle.classList.remove("header__title");
      headerTitle.classList.add("header__title--linkClicked");

      headerSubtitle.classList.remove("header__subtitle");
      headerSubtitle.classList.add("header__subtitle--linkClicked");

      ulNav.classList.remove("header__listInline");
      ulNav.classList.add("header__listInline--linkClicked");

      navBox.classList.remove("header__nav-box");
      navBox.classList.add("header__nav-box--linkClicked");

      ulNavLinks.forEach((navLink) => {
        navLink.classList.remove("header__listLink");
        navLink.classList.add("header__listLink--linkClicked");
      });   

  }

}

const app = new App();

И я получил ошибку: «main.js: 40 Uncaught ReferenceError: ulNavLinks не определен в HTMLLIElement.clickedLinkState (main.js: 40)».ulNavLinks - это nodeList.

Я пытался определить элементы, используя, например, this.titleBox = ..., но это стало еще хуже, я не смог получить к нему доступ из метода clickedLinkState,Вне класса это работало.

Почему я не могу получить доступ к ulNavLinks внутри моего метода?и почему я не могу получить доступ к своим свойствам внутри метода, если я объявляю их «this.titleBox», «this.navBox»?

Answer 1

Обязательно используйте this:

class App {

  constructor() {

    // Get elements from DOM
    this.titleBox = document.getElementById('titleBox');
    this.navBox = document.getElementById('navBox');
    this.navLinks = document.querySelectorAll('.header__listLink');
    this.headerTitle = document.getElementById('headerTitle');
    this.headerSubtitle = document.getElementById('headerSubtitle');
    this.ulNav = document.getElementById('ulNav');
    this.ulNavLinks = document.querySelectorAll('.ulNavLink');

    // for each nav link, add an event listener, expanding content area
    this.navLinks.forEach((link) => {
      link.addEventListener('click', this.clickedLinkState.bind(this));
    });

  }

  clickedLinkState(e) {

      e.preventDefault();

      this.titleBox.classList.remove("header__title-box");
      this.titleBox.classList.add("header__title-box--linkClicked");

      this.headerTitle.classList.remove("header__title");
      this.headerTitle.classList.add("header__title--linkClicked");

      this.headerSubtitle.classList.remove("header__subtitle");
      this.headerSubtitle.classList.add("header__subtitle--linkClicked");

      this.ulNav.classList.remove("header__listInline");
      this.ulNav.classList.add("header__listInline--linkClicked");

      this.navBox.classList.remove("header__nav-box");
      this.navBox.classList.add("header__nav-box--linkClicked");

      this.ulNavLinks.forEach((navLink) => {
        navLink.classList.remove("header__listLink");
        navLink.classList.add("header__listLink--linkClicked");
      });   

  }

}

const app = new App();

Answer 2

В JavaScript, как и сейчас, свойства экземпляра могут быть определены только внутри методов класса с использованием ключевого слова this ( здесь - это документ ).

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