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の定義とは
いくつか参考文献を挙げます。
- 『JavaScript本格入門』P229より
場所 | thisの参照先 |
---|---|
トップレベル(関数の外) | グローバルオブジェクト |
関数 | グローバルオブジェクト(Strictモードではundefined) |
call/applyメソッド | 引数で指定されたオブジェクト |
イベントリスナー | イベントの発生元 |
コンストラクター | 生成したインスタンス |
メソッド | 呼び出し元のオブジェクト(=レシーバーオブジェクト) |
Qiitaの記事 qiita.com
Qiitaの記事が私にとっては一番わかりやすいです。
エラーとなったものは、関数パターンで、thisはグローバルオブジェクトを指していると思います。 正常なものは、thisは呼び出し元のVueオブジェクトを指していると思います。ふと冷静になるとなんでthisでいい感じに各プロパティが指せるんだという感想になりますが、ちょっと今回はおいておきます。
今回は解決方法が楽だったので助かりました。
追記
ドンピシャな記事を教えていただきました。