アロー関数について[ES2015(ES6)][this][arguments]

2017年2月26日

アロー関数による関数定義と特徴を説明します。

 

関連ページ

関数について(function命令)

 

 

スポンサーリンク

 

 

下記コードはfunction命令による関数の定義です。この関数をアロー関数で書き換えていきます。

 

 

アロー関数は無名関数です。functionは記述せずに、引数の()の後に => を記述して関数を定義します。

 

処理内容が1行だけの場合(;で区切る一つのステートメント)、returnと{}を省略することが可能です。

 

引数が一つの場合は、カッコ()を省略することが可能です。

 

 

 

アロー関数の特徴


 

アロー関数には以下の特徴があります。

 

・通常の関数とthisの参照の挙動が違う
・コンストラクタ関数にはならない
・argumentsオブジェクトを持たない

 

通常の関数とthisの参照の挙動が違う

 

まずはアロー関数ではない場合の関数内のthisの挙動を説明します。

 

 

6行目
関数内のthisはグローバルオブジェクト(Window)を参照します。よってgetTitle2()関数内のthis.titleはwindow.titleと同じになりますが、window.titleが宣言されていないので、7行目ではundefinedとして出力されます。

 

関連ページ

thisキーワードについて

 

次にgetTitle2()関数をアロー関数に置き換えます。

 

上記コードにおいて、6行目のアロー関数内のthisは、bookオブジェクトを参照します。よってthis.titleはbook.title(こころ)と同じになります。アロー関数内のthisの参照先はアロー関数の定義された場所(定義されたスコープ内のthis)によって決まってきます。アロー関数がコンストラクタ関数にならない所以でもあります。

 

関連ページ

オブジェクトについて[コンストラクタ関数][new演算子]

 

 

 

argumentsオブジェクトを持たない

 

 

上記のgetBook変数に代入されている関数を、アロー関数に置き換えたのが下記のコードとなります。

 

関連ページ

argumentsオブジェクトについて

 

 

 

Copyright © 2017 ウェブの葉 All Rights Reserved.  プライバシーポリシー