thisの値

値 this は現在のオブジェクトを参照します。 この値は、例えば関数やOOPにおいて、 JavaScriptで広く使用されています。

構文

javascriptthis.現在のオブジェクト;

例

this を使用して、フォーカスを失った 入力フィールドの値をコンソールに出力してみましょう:

html<input id="elem" value="text">
javascriptlet input = document.querySelector('#elem');
input.addEventListener('blur', func);

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

例

this を使用して、フォーカスが 当たっていない入力フィールドの値を コンソールに出力してみましょう:

html<input id="elem" value="text">
javascriptlet input = document.querySelector('#elem');
input.addEventListener('blur', func);

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

例

次に、OOP における this の使用法を見てみましょう。 クラス Student に、学生の名前と名字を 表示する関数 show を書きます:

javascriptclass Student {
  name;
  surn;
  
  show() {
    return this.name + ' ' + this.surn;
  }
};
  
let stud = new Student;
stud.name = 'John';
stud.surn = 'Smit';
console.log(stud.show());

関連項目

  • 関数にコンテキストを束縛するメソッド bind,
  • 関数をコンテキスト付きで呼び出すメソッド call,
  • 関数をコンテキスト付きで呼び出すメソッド apply,