アロー関数のthisの束縛、及び関数の代入について

Question

アロー関数の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を
指定した場合は非表示が出る。
（オブジェクトの要素が見つからないのと、変数が定義されていないことのちがい？）

疑問点

1. アロー関数のthisの束縛は引数にも適用されるのか

引数は呼び出し元のデータという認識でしたが、引数にthis.routeを指定して表示されないということは
引数もアロー関数の中の制御に入っている(thisの束縛を受けている)という認識でよろしいでしょうか？

2. 自身のオブジェクト内の要素の呼び出し方法
Function内でthisを使用して自身の要素を呼び出せているが、Functionを使用しない場合、
もしくはアロー関数で実装する場合にどのように指定すればよいのか

3. そもそも無理やりアロー関数に統一する必要はない？
thisを活用したい場合（宣言元のオブジェクトを参照した場合）は基本的にアロー関数ではなく
Functionを使用したほうが良いのか？

4. 関数の代入について
参考にしたソースはoutputにrouteの値を代入するだけで関数を使用していたのですが、
これは、先を見越して（レスポンスはどんどん増えていくため）に関数を使用したのか
もしくは、ただ値を代入するだけでも関数を使用したほうが良いのか？

---

以上、初歩的な質問になりますが、ご回答いただければ幸いです。

Answer 1

1. アロー関数のthisの束縛は引数にも適用されるのか

はい、引数のデフォルト値は関数内側の先頭にあるように評価されます。デフォルト値のthisは、関数内から見えるthisと同じものを指します。

Function内でthisを使用して自身の要素を呼び出せているが、Functionを使用しない場合、

もしくはアロー関数で実装する場合にどのように指定すればよいのか

アロー関数での実行はできません。代わりに、ES6のメソッド記法を使えば、functionなしで実装可能です。

output() {
  return  this.route;
}

thisを活用したい場合（宣言元のオブジェクトを参照した場合）は基本的にアロー関数ではなく

Functionを使用したほうが良いのか？

そのとおりです。オブジェクトに結びつけるメソッドとしては、Arrow Functionは使える場面が限られます（Reactのイベントハンドラなどで、特定のインスタンスと結びつけたい場合に、あえてArrow Functionをプロパティに代入する形で書くことがあります）。

参考にしたソースはoutputにrouteの値を代入するだけで関数を使用していたのですが、

この値を使う文脈がわからないと、なんとも言えません。

Comments

[KeitaYoshida]

ご回答ありがとうございます。

> 引数のデフォルト値は関数内側の先頭にあるように評価されます。
全く知らずに使っていました、、、

アロー関数とFunctionは使い分けるのがベストな使い方なんですね
なんとかやればアロー関数でも可能だと思っていたので、ご回答いただけて助かりました。
ありがとうございます。