吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【ES2015】アロー関数式について

2014年10月10日 / category : es2015, javascript, typescript

アロー関数式について、自分のメモ用に少し記事を書いてみます。
まず、基本的な構文は、次のような感じ。

js
(引数...) => { ステートメント文 }

function式に比べてすごくシンプル。
もう少し具体的な構文を次に。

js
var hello = (_message) => { return _message }
console.log( hello('おはよう') );

hello変数にアロー関数を代入し、helloで関数を実行。
コンソールには、”おはよう”の文字列が出力される。

ちなみに、次のようにreturnを省略することも可能。

js
var hello = (_message) => _message

アロー関数の引数が複数ある場合は、次のような感じ。

js
var add = (_v1, _v2) => _v1 + _v2;
console.log( add(10, 20) );

10 + 20 で 30が出力される。

と、ここまでは前置き。
アロー関数は、function式をシンプルにしたもの・・・だけではなく、thisの扱いが異なる。
ここが重要。

例えば、次のfunction式

js
$('button').on({
	'click': function(){
		console.log( this );
	}
});

buttonをクリックすると、コンソールには button が出力される。
これを、アロー関数に置き換えてみる。

js
$('button').on({
	'click': () => {
		console.log( this );
	}
});

buttonをクリックすると、コンソールに Window が出力された。
アロー関数とfunction式では、thisの参照が異なることがわかる。

function式では、関数内がthisになりますが、
アロー関数では、定義した場所がthisになります。

これが具体的にコードでわかるように、アロー関数をES5でコンパイルすると、次のようにコンパイルされます。

js
var _this = this;
$('button').on({
	'click': function () {
		console.log(_this);
	}
});

上のコードを見ると、アロー関数のthisが定義された場所を指していることがわかります。

いままで、実務で

var _this = this;

という記述をしていたケースが多々ありましたので、アロー関数にすることでシンプルなコードにできるかな、という自分用のメモでした。