Javascript ES6類-方法無法訪問在類構造函數中定義的類屬性

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：在HTMLLIElement.clickedLinkState（main.js：40）上未定義ulNavLinks”。 “ ulNavLinks”是一個nodeList。

例如，我試圖使用'this.titleBox = ...'定義元素，但情況變得更糟，我無法從我的clickedLinkState方法訪問它。 在課堂外，它正在工作。

為什么我無法在方法內部訪問“ ulNavLinks”？ 如果我將它們聲明為“ this.titleBox”，“ this.navBox”，為什么不能在方法中訪問屬性？

Answer 1

就目前而言，在JavaScript中，實例屬性只能在使用關鍵字this （ 這里是doc ）的類方法中定義。

此外，還有一項實驗性功能 ，可支持公共/私有字段，由於瀏覽器支持不佳，您可能會在某些構建步驟中使用該功能 。

Answer 2

確保使用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();