Cannot read properties of undefined (reading 'classList') at HTMLButtonElement.eval

Question

前提・実現したいこと

.toogle-btnをクリックした際の動作（ハンバーガーメニュー）が正常に行われず、困っています。

index.js
-/module/spMenu.js

上記のようにファイルを置いています。
大枠は変えず（classを使い）、ファイルが動作するようにしたいと思っています。
また、不要な書き方をしている部分は教えていただきたいです。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
    at HTMLButtonElement.eval (spMenu.js:21)

<button class="toggle-btn"></button>をクリックした際に、上記エラーがコンソールに表示されます。
cLassListがうまく働いていないようです。

該当のソースコード

//index.html
<nav class="gnavi">
 <ul>
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
 </ul>
</nav>
<button class="toggle-btn"></button>
//ボタンクリック時
<nav class="gnavi open">
<button class="toggle-btn open"></button>

//index.js
import spMenu from "./module/spMenu.js";
const spMenuDo = new spMenu(".toggle-btn");
spMenuDo.init();

//spMenu.js
export default class spMenu {
  constructor(root, options = {}) {
    const defaultOptions = {
      root: document.querySelector(root),
      nav: document.querySelector("nav"),
      open: document.querySelector(".open"),
      elementOpen: ".open",
    };
    this.o = Object.assign(defaultOptions, options);
    this.root = this.o.root;
    this.nav = this.o.nav;
    this.open = this.o.open;
    this.elementOpen = this.o.elementOpen;
  }
  spMenu() {
    this.root.addEventListener("click", function () {
      this.nav.classList.toggle(elementOpen);
      this.open.classList.toggle(elementOpen);
    });
  }
  init() {
    this.spMenu();
  }
}

試したこと

cLassList以外の部分をコンソールログで確認しましたが、出力されているようでした。
この形でcLassListを使う方法はあるのでしょうか？

補足情報（FW/ツールのバージョンなど）

webpack

Answer 1

メソッドでのthisキーワードは取り扱いに少し注意が必要です。
詳しくはMDN等を参照してください。

class spMenu {
 //省略
 spMenu() {
    this.root.addEventListener("click", function() {
      console.log(this) //このthis
    });
  }
}

通常の関数構文は実行時の環境にthisが決定されます。
ある要素のイベント配信に関数を設定した場合、その関数はその要素のメソッドとして呼び出されます。
そのため、上記の構文でのthisはspMenuクラスインスタンス.rootになります。
spMenuクラスインスタンス.root.rootというプロパティは定義されていないためundefinedとなり、.classList呼び出しはエラーとなります。

該当のthisをspMenuクラスインスタンス自体にしたければ下記の用にfunctionにthisをbindするかアロー関数を使用する必要があります。

    this.root.addEventListener("click", function() {
    }.bind(this));

    this.root.addEventListener("click", () => {
    });

Comments

[frankurin]

ありがとうございました。
アロー関数にすることと、定数の見直しで無事解決できました！