アロー関数による関数定義と特徴を説明します。
関連ページ
スポンサーリンク
下記コードはfunction命令による関数の定義です。この関数をアロー関数で書き換えていきます。
|
1 2 3 4 5 |
function getSquare(height, width){ return height*width; } console.log( getSquare(2,3) ); //6 |
アロー関数は無名関数です。functionは記述せずに、引数の（）の後に => を記述して関数を定義します。
|
1 2 3 4 5 |
const getSquare = ( height, width ) => { return height*width; }; console.log( getSquare(2,3) ); //6 |
処理内容が1行だけの場合（;で区切る一つのステートメント）、returnと{}を省略することが可能です。
|
1 2 3 |
const getSquare = ( height, width ) => height*width; console.log( getSquare(2,3) ); //6 |
引数が一つの場合は、カッコ()を省略することが可能です。
|
1 2 3 |
const getName = name => '名前は' +name; console.log( getName('夏目漱石') ); //名前は夏目漱石 |
アロー関数の特徴
アロー関数には以下の特徴があります。
・通常の関数とthisの参照の挙動が違う
・コンストラクタ関数にはならない
・argumentsオブジェクトを持たない
通常の関数とthisの参照の挙動が違う
まずはアロー関数ではない場合の関数内のthisの挙動を説明します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const book = { title: 'こころ', getTitle:function(){ console.log( this.title ); //こころ function getTitle2(){ console.log( this.title ); //undefined } getTitle2(); } } book.getTitle(); |
6行目
関数内のthisはグローバルオブジェクト（Window）を参照します。よってgetTitle2()関数内のthis.titleはwindow.titleと同じになりますが、window.titleが宣言されていないので、7行目ではundefinedとして出力されます。
関連ページ
次にgetTitle2()関数をアロー関数に置き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const book = { title: 'こころ', getTitle:function(){ console.log( this.title ); //こころ const getTitle2 = () => console.log( this.title ); //こころ getTitle2(); } } book.getTitle(); |
上記コードにおいて、6行目のアロー関数内のthisは、bookオブジェクトを参照します。よってthis.titleはbook.title（こころ）と同じになります。アロー関数内のthisの参照先はアロー関数の定義された場所（定義されたスコープ内のthis）によって決まってきます。アロー関数がコンストラクタ関数にならない所以でもあります。
関連ページ
argumentsオブジェクトを持たない
|
1 2 3 4 5 |
var getBook = function(book){ console.log( arguments[0] +'の著者は'+ arguments[1] ); }; getBook('こころ','夏目漱石'); //こころの著者は夏目漱石 |
上記のgetBook変数に代入されている関数を、アロー関数に置き換えたのが下記のコードとなります。
|
1 2 3 4 5 |
const getBook = (book) => { console.log( arguments[0] +'の著者は'+ arguments[1] ); } getBook('こころ','夏目漱石'); //エラー |
関連ページ
