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

[ トップ ] [ 差分 | バックアップ | リロード ] [ 一覧 | 検索 | 最終更新 | ヘルプ ]

CONTENTS

Hardware

OS

Program

D
C
C#
Java
Python
Javascript
Ruby
Rust
vim

Javascript/デザインパターン

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(this.count);
  }, 1000);
};

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