コンストラクタに設定した要素が取得できない

Question

仕事でとあるサイトに無限スクロールを実装しようとしているのですが、コードの整備性を改善するためクラス構文を使用したところプログラムが動かなくなりました。

class InfScr {
    constructor(url) {
        this.entryMore = document.getElementsByClassName('entry-more');
        this.entryLoading = document.getElementsByClassName('entry-loading');
        this.entryItems = document.getElementsByClassName('entry-items');
        this.documentHeight = document.documentElement.clientHeight;
        this.windowsHeight = window.innerHeight;
        this.url = url;
        this.postNumNow = 9;
        this.postNumAdd = 45;
        this.flag = false;
        this.postData = {
            post_num_now: this.postNumNow,
            post_num_add: this.postNumAdd
        }
    }

    load() {
        for (let item of this.entryMore) {
            item.addEventListener("click", this.process);
            item.addEventListener("touch", this.process);
        }
    }

    unload() {
        for (let item of this.entryMore) {
            item.removeEventListener("click", this.process);
            item.removeEventListener("touch", this.process);
        }
    }

    process() {
        for (let item of this.entryMore) {
            item.classList.add('is-hide');
        }
        for (let item of this.entryLoading) {
            item.classList.add('is-show');
        }
        this.flag = true;
        fetch(this.url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json; charset=utf-8'
            },
            body: JSON.stringify(this.postData)
        }).then(
            Response => Response.json()
        ).then(data => {
            for (let item of this.entryItems) {
                item.innerHTML = item.innerHTML + data[0];
            }
            for (let item of this.entryLoading) {
                item.classList.remove('is-show');
            }
            if (data[1] > 0) {
                for (let item of this.entryMore) {
                    item.classList.remove('is-hide');
                }
            }
            this.documentHeight = document.documentElement.clientHeight;
            this.postNumNow += this.postNumAdd;
            this.flag = false;
        }).catch(error => {
            console.error(error);
        });
    }
}

発生している問題

• 一部のメソッド内でthis.hogeと指定した要素がundefinedになる

この一点です。
load()内にあるthis.entryMoreを使用したfor文は問題なく実行されますが、
process()内のthis.~は全てundefinedになり、一番上のfor文から反復不能とエラーが返ってきます。

試したこと

process()に引数をつける

load内for文の変数itemをprocess()に継承できるよう引数を付けましたが、process()自体は問題なく実行されるものの読み込み時に発火してしまいます。イベントリスナーの記述がある通り特定の要素をクリックした時に実行されるようにしたいです。

よろしくお願いします。

Answer 1

            item.addEventListener("click", this.process);
            item.addEventListener("touch", this.process);

addEventListener()で登録されたコールバック内では、this はイベントターゲット item になります。

item.addEventListener("click", this.process.bind(this)) のように this を固定すれば期待通りの動作になると思います。

Comments

[Lave]

ありがとうございます。すんなりと解決しました。
インスタンス化されたオブジェクトのthisにはならないのですね。勉強になります。