thisの取り扱い | アロー関数 | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

アロー関数とthis

JavaScriptでは、thisは「現在どのオブジェクトを指しているか」を表す特別なキーワードです。

通常の関数では、thisは関数の呼び出し方によって決まります。一方、アロー関数では、関数が定義された場所のthisをそのまま引き継ぐという大きな特徴があります。

通常の関数におけるthis

通常の関数では、メソッドとして呼び出されると、そのオブジェクトがthisになります。

通常の関数の例

const person = {
    name: "Taro",

    greet: function () {
        console.log("Hello, " + this.name);
    }
};

person.greet();

実行結果

Hello, Taro

この場合、thisはpersonオブジェクトを指しているため、this.nameは"Taro"になります。

通常の関数で起こる問題

通常の関数をコールバックとして渡すと、thisが変わってしまうことがあります。

setTimeoutを使った例

const person = {
    name: "Taro",

    greet: function () {
        setTimeout(function () {
            console.log(this.name);
        }, 1000);
    }
};

person.greet();

実行結果（一例）

undefined

コールバック関数はpersonのメソッドとして呼ばれるわけではないため、thisはpersonを指しません。

アロー関数におけるthis

アロー関数では、自分自身のthisを持たず、外側のthisをそのまま利用します。

アロー関数の例

const person = {
    name: "Taro",

    greet: function () {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

person.greet();

実行結果

Taro

アロー関数は外側のgreet()のthisをそのまま利用するため、person.nameへ正しくアクセスできます。

通常の関数とアロー関数の違い

非同期処理でよく利用される理由

アロー関数は、setTimeout()やイベント処理、Promiseなどのコールバックで特によく使われます。

Promiseでの例

const user = {
    name: "Taro",

    showName: function () {
        Promise.resolve().then(() => {
            console.log(this.name);
        });
    }
};

user.showName();

実行結果

Taro

Promiseのコールバックでも、アロー関数ならthisが変わらず、オブジェクトのプロパティへ安全にアクセスできます。

アロー関数をメソッドとして使う場合の注意

アロー関数はオブジェクトのメソッドにはあまり向いていません。

const person = {
    name: "Taro",

    greet: () => {
        console.log(this.name);
    }
};

person.greet();

実行結果（一例）

undefined

アロー関数はオブジェクト自身をthisとして持たないため、オブジェクトのメソッドを定義する場合は通常の関数を使うのが一般的です。

まとめ

• 通常の関数のthisは、呼び出し方によって決まる。
• アロー関数は定義された場所のthisをそのまま引き継ぐ。
• コールバックや非同期処理では、アロー関数を使うとthisが変わらず扱いやすい。
• オブジェクトのメソッドを定義する場合は、通常の関数を使うのが一般的である。