addEventListner内でUndefined、外では正常に値を取得できる。

Question

document.addEventListener関数をクラス内に記載し、クラス内変数を更新しようとしましたが、document.addEventListener関数内からの読み込みではUndefinedが帰ってきます。
なぜ変数にアクセスできないのか教えてください。

class Index{

	constructor()
	{
		this.scroll_top = 0;
	}

	filter_open(){

		document.addEventListener("scroll", function(){
			alert(this.scroll_top);
		});
		
	}


}

Answer 1

thisが違う物を指しているからです。

        document.addEventListener("scroll", ()=>{
            alert(this.scroll_top);
        });

【アロー関数 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Comments

[MashuScott]

回答ありがとうございます。