thisの利用 | メソッドの定義と呼び出し | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

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

thisとは何か？

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

ただし、thisが何を指すかは関数がどのように呼び出されたかによって変わります。そのため、JavaScriptの中でも特に理解が難しい機能の一つとされています。

オブジェクトのメソッド内でのthis

オブジェクトのメソッド内では、thisはそのメソッドを呼び出したオブジェクトを指します。

const person = {
    name: "Taro",
    age: 25,

    greet() {
        console.log("こんにちは " + this.name);
    }
};

person.greet(); // こんにちは Taro

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

通常の関数でのthis

通常の関数では、thisは呼び出し方によって変化します。

function showThis() {
    console.log(this);
}

showThis();

ブラウザでは通常モードではwindow、厳密モードではundefinedになります。

グローバルスコープでのthis

グローバルスコープのthisも実行環境によって異なります。

console.log(this);

近年はES Modulesが主流になっているため、グローバルのthisはundefinedになるケースも多くなっています。

コールバック関数でのthis

メソッドをそのままコールバック関数として渡すと、thisが元のオブジェクトではなくなります。

const person = {
    name: "Taro",

    greet() {
        console.log("こんにちは " + this.name);
    }
};

setTimeout(person.greet, 1000);

この場合、greetは単なる関数として呼び出されるため、thisはpersonではありません。その結果、this.nameはundefinedになります。

bindでthisを固定する

bind()を使用すると、thisを任意のオブジェクトへ固定できます。

const person = {
    name: "Taro",

    greet() {
        console.log("こんにちは " + this.name);
    }
};

setTimeout(person.greet.bind(person), 1000);

この例では、bind()によってthisが常にpersonになるため、正しく名前が表示されます。

アロー関数のthis

アロー関数は通常の関数とは異なり、自分専用のthisを持ちません。

外側のスコープのthisをそのまま利用するため、「呼び出し方」でthisが変わることはありません。

const person = {
    name: "Taro",

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

person.greet();

この例では、アロー関数はpersonを指さず、外側のthisを参照します。そのため、undefinedが表示されます。

一方で、通常のメソッド内でコールバックとしてアロー関数を使うと、外側のthisを維持できるため便利です。

const person = {
    name: "Taro",

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

person.greet(); // Taro

thisの参照先まとめ

まとめ

• thisは現在参照しているオブジェクトを表すキーワードである。
• オブジェクトのメソッドでは、そのオブジェクト自身を指す。
• 通常の関数では呼び出し方によって参照先が変わる。
• bind()を使うとthisを固定できる。
• アロー関数は外側のthisを引き継ぐ。
• thisはJavaScriptの中でも特に重要な概念であり、呼び出し方による違いを理解することが大切である。