JavaScriptでのthisの使い方とapplyメソッドによる正しい呼び出し方法

JavaScript初心者にとって、thisの挙動は少し分かりにくいポイントです。特に関数をオブジェクトの文脈で呼び出す場合や、applyやcallを使う場合に理解が必要です。

thisとは何か？

thisは関数が呼ばれた文脈（コンテキスト）を指します。グローバルスコープでは通常グローバルオブジェクト（ブラウザでは window）を指しますが、オブジェクトメソッドとして呼ぶとそのオブジェクトを指します。

applyメソッドの使い方

関数を別のオブジェクトのコンテキストで呼び出したい場合、applyやcallを使用します。applyは引数を配列で渡す点が特徴です。

function greet(greet, punctuation) {
  return `${greet}, ${this.name}${punctuation}`;
}

const person = { name: 'Hoge' };

// applyで呼び出す
console.log(greet.apply(person, ['Hello', '!'])); // Hello, Hoge!

注意点

元のサンプルプログラムで動作しない場合、考えられる原因は主に以下です。

• コードを直接ブラウザコンソールで実行していない
• ES6テンプレートリテラルのバッククォートが正しくない
• 関数呼び出し時に console.log で出力していない

上記のサンプルは正しく実行すれば、必ず Hello, Hoge! と出力されます。

まとめ

thisは関数呼び出しの文脈に依存します。オブジェクトコンテキストで関数を呼ぶには apply や call が便利です。テンプレートリテラルと組み合わせることで、簡潔にメッセージを作成できます。