Web系エンジニアを目指して転職活動をしているSierです｡
とある企業様の課題を解いている際に､ふと疑問に思ったことを記事にしていきます｡
前置き
その課題はVue.jsを使ったものでした｡私はほぼ初めて触りましたが
明確にメンバとメソッドが分けられていてわかりやすい印象を受けました｡
もともとCやC++から勉強した人間のため､Angularの書き方が一番しっくり来ていたのですが
Vueもあまり変わらないなと思いました。
ふと､Vueのメソッド内で､ローカルで定義されているメンバへアクセスしたい課題がありました。
その差異､｢this.hogehoge｣みたいな形でアクセスできると思っていましたがエラーが起きました。
しばらく???となっていました｡
原因と解決策
原因を色々調べていると､どうやらメソッドの定義の仕方が悪かったようです｡
methods : { 'XXX' : () => { this.hogehoge} } // NG
methods : { 'XXX' : function { this.hogehoge } } // OK
どうやら､アロー関数とそうでないメソッド定義によって､色々と異なるようです｡
詳しくは以下の記事に記事に色々書いているため端折ります｡
今回は､その性質の１つ､thisのスコープの違いのようです｡
JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
アロー関数は、functionキーワード使った関数のシュガーシンタックス、つまり、書き方が違うだけで機能は同じだという説明を耳にしたことはありませんでしょうか？この説明は、正確ではなく実際は様々な…
qiita.com
コメント