アロー関数を勉強してみた
ES6(ECMAScript)で導入された「関数」の新しい書き方
自分自身で勉強のためのメモなので既にわかりやすい解説を書いてくれている記事が存在していると思います。
アロー関数と関数の違い
大きく分けて２つ存在します。
1 functionより短く書ける
functionと宣言して書かなくて良い、一行で書ける
個人的に黒魔術を詠唱しやすいと感じる
通常の関数とアロー関数の比較
// function
function intcalc(x){
return x + 1
}
// arrow function 省略形
const intcalc = (x) => x + 1 // 1行だけの場合はreturnは不要
2 宣言元のthisを参照
アロー関数はthisの値を語彙的に束縛するらしいのですが、言葉で説明するのは難しいので実際に書いて見るのが早い気がする。
１の省略できるという違いだけを知っていると後々に不具合を解決するのに時間が掛かってしまう事になると思います。
通常の関数内のthis
var greething = 'Good morning'
function printGreething(){
// ここのthis
console.log(this.greething)
}
let object1 = {
greething: 'Hello',
func: printGreething
}
let object2 = {
greething: 'Good evening',
func: printGreething
}
// 上記２つの書き方を展開して書くとこんな感じ？
let object3 = {
greething: 'おはようございます！',
func: function(){
// this.greething = greething: 'おはようございます！'
console.log(this.greething)
}
}
上記２つのオブジェクトを呼び出してみたいと思います
// 実行結果：Hello
object1.func()
// 実行結果：Good evening
object2.func()
printGreething関数内で利用しているthis.greethingの値は、呼び出し元によって異なるという事になります。
呼び出し元がgreethingに別の値を入れたらその値を確定するという事です。
冷静に考えてみると引数として渡してるわけでもないのにthis.greethingが呼出し元オブジェクトによって変化するって気持ち悪いですよね汗
今度はアロー関数を使って同じ処理を書きます。
アロー関数内のthis
var greething = 'Good morning'
// arrow function
let printGreething = () => {
// greething = 'Good morning'で確定されprintGreethingに代入される
console.log(this.greething)
// console.log('Good morning') こんな感じのイメージ
}
let object1 = {
greething: 'Hello',
func: printGreething
}
let object2 = {
greething: 'Good evening',
func: printGreething
}
上記２つのオブジェクトを呼び出してみます。
// 実行結果：Good morning
object1.func()
// 実行結果：Good morning
object2.func()
アロー関数で宣言された関数は、宣言された時点でthisの値を確定（束縛）させます。
あとがき
Vue.jsの公式リファレンスでここはアロー関数で記述をしないでくださいと書かれていたのをみて調べてみました。
本来なら知っている事前提でVue.jsを勉強すべきなんでしょうけど順番逆になってしまいました汗