質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.51%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 740

KeitaYoshida

score 8

 アロー関数の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の値を代入するだけで関数を使用していたのですが、
    これは、先を見越して(レスポンスはどんどん増えていくため)に関数を使用したのか
    もしくは、ただ値を代入するだけでも関数を使用したほうが良いのか?

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

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

output() {
  return  this.route;
}

thisを活用したい場合(宣言元のオブジェクトを参照した場合)は基本的にアロー関数ではなく
Functionを使用したほうが良いのか?

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/27 15:17

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る