アロー関数のthisの束縛、及び関数の代入について
Function関数をアロー関数に統一しようと考えており
既存のFanction関数を置き換えていたのですが、thisの値がうまく取得できずに悪戦苦闘しております。
直接的な質問としてはJSONデータ内のオブジェクトのデータの取得方法になるかと思いますが、
アロー関数に付きましても疑問点がありますので「アロー関数のthisの束縛、及び関数の代入について」
という形で質問を上げております。
コード & 検証
var pages = [{ route: '', output: 'hoge' }, { route: 'about', output: 'huga' }, { route: 'hogehoge', # 既存のソース -> hogehoge が表示される output: function () { return this.route; } # 単純にアロー関数化したソース -> 何も表示されない // output: () => this.route # 引数で渡してみる -> 何も表示されない(引数も束縛されていた?) // output: (rVal = this.route) => rVal # 念の為this抜き指定 -> route is not defined // output: (rVal = route) => rVal # 念の為引数で渡す確認 -> hogehoge が表示される // output: function (rVal = this.route) { // return rVal; // } # 念の為直接渡し確認 -> hogehoge が表示される // output: (rVal = 'hogehoge') => rVal # そもそも値を返すだけなら関数を作らなくてもよい? -> route is not defined // output: route # 上記、thisパターン -> 何も表示されない // output: this.route } ]; #http.createServerにてroute値でルーティング後outputを出力
思考整理
そもそもjavascript初心者でthisの認識自体イマイチなので、簡単に思考整理すると
Fanction内のthisは定義元の値を参照するとのことなので、この場合pages[2]に相当する?
アロー関数内ではグローバルを見に行くため、グローバルにrouteがなくエラーになる
と思ったのだが、実際には非表示(andefined?)、Function内でthisをつけずにrouteを
指定した場合は非表示が出る。
(オブジェクトの要素が見つからないのと、変数が定義されていないことのちがい?)
疑問点
- アロー関数のthisの束縛は引数にも適用されるのか
引数は呼び出し元のデータという認識でしたが、引数にthis.routeを指定して表示されないということは
引数もアロー関数の中の制御に入っている(thisの束縛を受けている)という認識でよろしいでしょうか?
2. 自身のオブジェクト内の要素の呼び出し方法
Function内でthisを使用して自身の要素を呼び出せているが、Functionを使用しない場合、
もしくはアロー関数で実装する場合にどのように指定すればよいのか
3. そもそも無理やりアロー関数に統一する必要はない?
thisを活用したい場合(宣言元のオブジェクトを参照した場合)は基本的にアロー関数ではなく
Functionを使用したほうが良いのか?
4. 関数の代入について
参考にしたソースはoutputにrouteの値を代入するだけで関数を使用していたのですが、
これは、先を見越して(レスポンスはどんどん増えていくため)に関数を使用したのか
もしくは、ただ値を代入するだけでも関数を使用したほうが良いのか?
以上、初歩的な質問になりますが、ご回答いただければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/27 06:17