アロー関数は便利!
アロー関数って便利ですよね。function
っていちいち書かなくて済むし、なんたって通常の匿名関数と違ってthis
がその都度定義されたりしませんから。例えば、
setTimeoutにおける匿名関数とアロー関数の違い
var value = 'GLOBAL';
const NotArrow = {
value: 'LOCAL',
timer: function() {
setTimeout(function() {
console.log('NotArrow: ' + this.value);
}, 1000)
},
};
const Arrow = {
value: 'LOCAL',
timer: function() {
setTimeout(() => {
console.log('Arrow: ' + this.value);
}, 1000)
},
};
NotArrow.timer(); // NotArrow: GLOBAL
Arrow.timer(); // Arrow: LOCAL
こうしたコールバックが存在するときは本当にアロー関数って重宝します。で、今回のお話ですがアロー関数を調子に乗って何でもかんでも使ってしまってえらい目を見たという話です。いや、すでにタイトルでオチてますが。
アロー関数も万能じゃない!
アホな実装の例
var value = 'foobar';
function Foo(value) {
this.value = value;
}
Foo.prototype.printValue = () => {
console.log(this.value);
};
const bar = new Foo('テスト');
bar.printValue(); // foobar
上の実装ではアロー関数を使ってしまっているためthis
がセットされない、というかthis
がグローバルオブジェクトに固定されてしまっているのですね。例えば、bar.printValue.call(bar);
などとやっても無駄です。この辺りのことはMDNにも書かれていますね。アロー関数をfunction
に改めれば期待通りの動作になります。こんな馬鹿馬鹿しいことをしてしまうのは私だけかもしれませんが、アロー関数も万能じゃないし、使いすぎはよくないぞってことで。