JavaScriptのthisをわかりやすく整理する（Arrow Function編）

· 747 words · 2 minute read

はじめに

前回は関数とメソッド編でした。

Arrow Function自体についての説明は次回の記事で行います。

読んだもの

JavaScriptの入門書 - 関数とthis
最強オブジェクト指向言語 JavaScript 再入門！

Arrow Functionにおけるthis

関数/メソッドにおけるthisの値は呼び出されたときに決まるのに対し、
Arrow Functionにおけるthisの値は定義時に静的に決まります。

これが大きな違いです。

Arrow Functionとコールバック関数

thisの値が定義時に決まるというArrow Funcgtionの特徴は、コールバック関数を呼び出すときに活用できます。

メソッドの場合は、コールバック関数の中でthisを定義すると、呼び出し時に予期せぬオブジェクトを指して問題になることがありました。

"use strict";

const person = {
    suffix: "さん",

    printName(names) {
        return names.map(function(name) {
            return name + this.suffix;
        });
    }
};

person.printName(["太郎", "二郎", "三郎"]);
// => TypeError: Cannot read property 'suffix' of undefined
// thisに匿名関数が渡っているため、thisはundefindとなる

一方、Arrow Functionの場合は、thisは常に一つ外側のオブジェクトを指しています。

このため、呼び出す時のことは気にせずコールバック関数を使うことができます。

"use strict";

const person = {
    suffix: "さん",

     printName(names) {
        return names.map((name) => {
            return name + this.suffix;
        });
    }
};

person.printName(["太郎", "二郎", "三郎"]);
// => [ '太郎さん', '二郎さん', '三郎さん' ]
// thisは常にpersonを指している

おわりに

次回はArrow Functionを使った関数式について説明します。

JavaScript

関連記事