javascript - Javascript ES6 类 - 方法无法访问在类构造函数中定义的类属性

问题描述

所以我试图在一个类中构建我的代码，以便它可以更有条理，但我正在努力。我有代码：

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 is not defined at HTMLLIElement.clickedLinkState (main.js:40)”。'ulNavLinks' 是一个节点列表。

例如，我试图使用“this.titleBox = ...”来定义元素，但更糟糕的是，我无法从 clickedLinkState 方法访问它。在课外它正在工作。

为什么我无法访问我的方法中的“ulNavLinks”？如果我将它们声明为“this.titleBox”、“this.navBox”，为什么我不能在方法中访问我的属性？

标签： javascriptclassecmascript-6

javascript - Javascript ES6 类 - 方法无法访问在类构造函数中定义的类属性

问题描述

解决方案

推荐阅读