グローバルコンテキストにおけるthis | thisの扱い方 | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

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

thisとは？

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

JavaScriptでは、thisは関数がどのように呼び出されたかによって値が決まります。そのため、同じ関数でも呼び出し方によってthisが変わることがあります。

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

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

const user = {
    name: "Taro",

    showName() {
        console.log(this.name);
    }
};

user.showName();

この例では、thisはuserを指しているため、"Taro"が表示されます。

通常の関数でのthis

通常の関数として呼び出した場合、thisは呼び出し方によって異なります。

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

showThis();

通常の関数では、オブジェクトのメソッドとして呼び出していないため、thisはオブジェクトを指しません。

strictモードでのthis

strictモードでは、通常の関数内のthisはundefinedになります。

"use strict";

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

showThis();

現在のJavaScriptでは、意図しない動作を防ぐためにもstrictモードが利用されることが多くあります。

アロー関数のthis

アロー関数は、自分自身のthisを持ちません。外側のthisをそのまま利用します。

const user = {
    name: "Taro",

    regular() {
        console.log(this.name);
    },

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

user.regular();
user.arrow();

通常のメソッドではthisはuserですが、アロー関数では外側のthisを参照するため、期待どおりにならないことがあります。

bind()でthisを固定する

bind()を使うと、関数のthisを指定したオブジェクトに固定できます。

const user = {
    name: "Taro"
};

function showName() {
    console.log(this.name);
}

const boundFunction = showName.bind(user);

boundFunction();

この例では、showName()のthisは常にuserになります。

call()・apply()との違い

thisを理解するポイント

• オブジェクトのメソッドでは、そのオブジェクトを指す。
• 通常の関数では、呼び出し方によって値が変わる。
• strictモードでは通常の関数内のthisはundefinedになる。
• アロー関数は自分自身のthisを持たず、外側のthisを利用する。
• bind()を使うと、thisを固定できる。

まとめ

• thisは現在の処理対象となるオブジェクトを表す。
• 関数の呼び出し方によってthisの値は変化する。
• オブジェクトのメソッドでは、そのオブジェクト自身を指す。
• アロー関数は外側のthisを利用するため挙動が異なる。
• bind()、call()、apply()を使うとthisを明示的に指定できる。