10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Prototypeの関数でアロー関数は使わない

Posted at

アロー関数は便利!

アロー関数って便利ですよね。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に改めれば期待通りの動作になります。こんな馬鹿馬鹿しいことをしてしまうのは私だけかもしれませんが、アロー関数も万能じゃないし、使いすぎはよくないぞってことで。

10
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?