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

現在作成中です。今後加筆修正してまいります。
スポンサーリンク
スポンサーリンク

thisとは？

thisは、JavaScriptのキーワードで、関数やオブジェクトの実行コンテキスト（文脈）を指します。つまり、thisは「現在の実行中のコードがどのオブジェクトを参照しているか」を示すものです。thisの値は、コードの実行コンテキストによって異なり、状況によって動的に変化します。

グローバルコンテキストにおけるthis

JavaScriptでは、コードがグローバルスコープ（最上位のスコープ）で実行されるとき、グローバルコンテキストという文脈に置かれます。このときのthisは、実行環境に応じて異なります。

  • ブラウザ環境では、thisはグローバルオブジェクト（windowオブジェクト）を指します。
  • Node.js環境では、thisはグローバルオブジェクト（globalオブジェクト）ではなく、module.exportsを指します。

グローバルコンテキストにおけるthisの例

// ブラウザ環境での例
console.log(this === window);  // true

// Node.js環境での例
console.log(this === global);  // false
console.log(this === module.exports);  // true

この例では、ブラウザとNode.jsでのthisの動作の違いが確認できます。ブラウザではthisがwindowオブジェクトを指し、Node.jsではmodule.exportsを指しています。

関数内でのthisの扱い

グローバルコンテキストにおける関数内でのthisは、関数が通常の呼び出し方をされた場合、やはりグローバルオブジェクトを指します。ただし、厳密モード（strict mode）では異なる挙動を示します。

通常モードと厳密モードの違い

通常モード 厳密モード
thisはグローバルオブジェクトを指す thisはundefinedになる
暗黙的にwindowやglobalにバインドされる 暗黙的なバインドが行われない

関数内でのthisの例

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

// 通常モードでの実行（ブラウザ環境）
showThis();  // windowオブジェクトを指す

// 厳密モードでの実行
"use strict";
showThis();  // undefined

この例では、通常モードではthisがwindowオブジェクトを指していますが、厳密モードではthisがundefinedとなり、暗黙のバインドが行われなくなっています。

Arrow関数でのthisの扱い

通常の関数とは異なり、Arrow関数ではthisの値が定義された場所（つまり、レキシカルスコープ）に基づいて決定されます。Arrow関数はthisの値を自分自身でバインドせず、外側のスコープからthisを継承します。

Arrow関数でのthisの例

const obj = {
    value: 42,
    regularFunc: function() {
        console.log(this.value);  // 42
    },
    arrowFunc: () => {
        console.log(this.value);  // undefined（グローバルスコープのthisを参照）
    }
};

obj.regularFunc();  // 42
obj.arrowFunc();    // undefined

この例では、regularFuncは通常の関数であり、thisがobjオブジェクトを指していますが、arrowFuncではthisが外側のスコープにバインドされ、undefinedとなっています。

グローバルスコープにおけるthisの重要性

thisがグローバルスコープにおいてどのように動作するかを理解することは、コードの予期しない動作を防ぐ上で非常に重要です。特に、thisがグローバルオブジェクトを指すことに注意し、thisの値を明示的にバインドする方法（bind、call、applyなど）も有効に使うことが求められます。

bindを使ったthisのバインドの例

const obj = {
    value: 100
};

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

const boundFunc = showThis.bind(obj);
boundFunc();  // 100

この例では、bindメソッドを使って、関数のthisを明示的にobjにバインドしています。これにより、関数内でthisがobjを指すようになります。

まとめ

グローバルコンテキストにおけるthisは、ブラウザ環境やNode.js環境で異なる動作を示します。通常モードと厳密モードでも挙動が異なり、特にthisのバインドに注意する必要があります。また、thisを明示的にバインドすることで、予期せぬ動作を防ぐことが可能です。thisの挙動を理解することで、JavaScriptのオブジェクト指向プログラミングをより効果的に行えるようになります。

スポンサーリンク