Yoppy's Blog

主に何でもない日常の事や技術ネタを更新します

【JavaScript】アロー関数の使い方

JavaScript】アロー関数の使い方

今回はタイトルの通りES6(2015)にて実装された、アロー関数についてやります。はい。

アロー関数って何?(What)

ずばり、アロー関数とは...

  • 匿名関数の省略系。
  • しかしargumentsオブジェクトを持たない。
  • thisキーワードを束縛しない。
  • thisキーワードを束縛しない。

匿名関数の省略形

まずは見慣れた書き方。


window.addEventListener('click', function(e) { 
    console.log(e.clientX);
    console.log(e.clientY); 
});

アロー関数を使って匿名関数を省略形にした書き方。


window.addEventListener('click', e => {
    console.log(e.clientX);
    console.log(e.clientY);
});

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


var sum = arguments => {
    //code...
}
// ↑これは、エラー

thisキーワードを束縛しない。

JavaScriptの仕様でthisキーワードの参照がwindowオブジェクトに変わってしまい、思うように動かないコード


function person(name) {
    this.name = name || '';
}

person.prototype.addSayNameEvent = function() {
    window.addEventListener('click', function() {
        console.log('My name is ' + this.name);
    });
}

var person1 = new person('john');

person1.addSayNameEvent();

アロー関数を使うと...


function person(name) {
    this.name = name || '';
}

person.prototype.addSayNameEvent = function() {
    window.addEventListener('click', () => {
        console.log('My name is ' + this.name);
    });
}

var person1 = new person('john');

person1.addSayNameEvent();

なんとこれ思い通りの挙動をするんですね。はい。

まとめ

アロー関数とは、

  • 匿名関数の省略系。
  • しかしargumentsオブジェクトを持たない。
  • thisキーワードを束縛しない。

というJavaScriptのthisキーワードにおけるジャイアニズムを実現する事のできる関数でしたねw

「お前のthisは、俺のthis。」

みたいな...ね?w


Twitter: @GochiUser

HP: http://yoppy.webcrow.jp