JavaScriptのthisでハマった。

JavaScriptのthisよくわからんわという内容です。

問題概要・解決策

以下のようなdataを持つVueファイルを作成したとします。

data(){
    return{
        // 適当な要素
        hogeArray: [1, 2, 3],
        fuga: 1,
    }
}

以下のようなmethodは、意図通りに動作しません。TypeError: Cannot read property 'fuga' of undefined というエラーが出ると思います。

piyo() {
    let filteredArray = this.hogeArray.filter(function (value) {
        // 1だけをfilterする。→ここでエラー
        return value === this.fuga;
    });
    this.hogeArray = filteredArray;
}

正しくは、以下のように書く必要があります。

piyo() {
    const fugaValue =this.fuga;

    let filteredArray = this.hogeArray.filter(function (value) {
        // 1だけをfilterする。
        return value === fugaValue;
    });
    this.hogeArray = filteredArray;
}

thisは難しいということを初めて知った瞬間であります。 定義をちゃんと読んでみたいと思います。

thisの定義とは

いくつか参考文献を挙げます。

場所 thisの参照先
トップレベル(関数の外) グローバルオブジェクト
関数 グローバルオブジェクト(Strictモードではundefined)
call/applyメソッド 引数で指定されたオブジェクト
イベントリスナー イベントの発生元
コンストラクター 生成したインスタンス
メソッド 呼び出し元のオブジェクト(=レシーバーオブジェクト)

Qiitaの記事が私にとっては一番わかりやすいです。

エラーとなったものは、関数パターンで、thisはグローバルオブジェクトを指していると思います。 正常なものは、thisは呼び出し元のVueオブジェクトを指していると思います。ふと冷静になるとなんでthisでいい感じに各プロパティが指せるんだという感想になりますが、ちょっと今回はおいておきます。

今回は解決方法が楽だったので助かりました。

追記

ドンピシャな記事を教えていただきました。

tadaken3.hatenablog.jp