JavaScriptのthisでハマった。 - 等身大から1割増し

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の定義とは

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

『JavaScript本格入門』P229より

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