Javascript/デザインパターン/Others/アロー関数(thisの扱い) のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
Javascript/デザインパターン/Others/アロー関数(thisの扱い) へ行く。
- 1 (2022-07-26 (火) 03:25:10)

Javascript/デザインパターン/Others/アロー関数(thisの扱い) †

下記、コードでは、setTimeout では、this が Counter を指してほしいが、全ての関数の外では、this は、グローバルオブジェクトを参照してしまうため、一旦 self に this を入れて、setTimeout の中では self を利用している。

let Counter = function() { this.count = 0; };
Counter.prototype.inc = function() {
  const self = this;
  setTimeout(function() {
    self.count++;
    console.log(self.count);
  }, 1000);
};

let c = new Counter();
c.inc();   // 1
c.inc();   // 2

アロー関数内の this は、スコープ内のコンテキストの this を保持するので、意図する書き方ができる(他言語と似たような意味合いのthisとなる)

let Counter = function() { this.count = 0; };
Counter.prototype.inc = function() {
  setTimeout(() => {
    this.count++;
    console.log(self.count);
  }, 1000);
};

let c = new Counter();
c.inc();   // 1
c.inc();   // 2