JavaScript this

thisは使い方によって指すものが変わります。今回はその例をやります。

サンプル

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
	<button id="btn1" name="属性" >メソッド呼び出し</button>
	<button id="btn2" name="属性" >メソッド→関数呼び出し</button>
</body>
<script>

// 変数
var name = "グローバル"

// オブジェクト
var obj = {
	name: "ローカル"
};

// オブジェクトのメソッド
obj.alert = function() {
	alert("オブジェクトのメソッド:" + this.name);
};

// thisの中身を表示
function show(){
	
	// 関数
	alert("関数:" + this.name);

	// メソッド
	obj.alert();
}

// ボタン(メソッド呼び出し)
var btn1 = document.getElementById("btn1");
btn1.onclick = show;

// ボタン(メソッド→関数呼び出し)
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
	// 関数
	alert("イベント:" + this.name);

	show();
};

// HTML読み込み時のthisを表示
show();

</script>
</html>

上記サンプルでは、HTML読み込み時とボタン押下時に関数とオブジェクトのメソッドでthisを使ってメッセージを表示しています。

実行結果は以下になります。

表示タイミング	呼び出し	表示内容
起動時	関数	グローバル
起動時	オブジェクトのメソッド	ローカル
ボタン(メソッド呼び出し)	関数	属性
ボタン(メソッド呼び出し)	オブジェクトのメソッド	ローカル
ボタン(メソッド→関数呼び出し)	イベント	属性
	関数	グローバル
	オブジェクトのメソッド	ローカル

オブジェクトのメソッドはすべて「ローカル」を表示しますが、関数は呼び出し方により「グローバル」、「属性」を表示したりします。

関数呼び出し時のthisについて

メソッドから呼ばれる場合、thisはオブジェクトを指し、関数から呼ばれる場合は全体(window)を指します。
※メソッドはオブジェクト内の関数、関数は単体で動作するものを指しています。

サンプルのbtn1ではonclickにshow関数をセットしているので、show関数はbt1オブジェクトのメソッドとして扱われ、
btn2ではonclickに無名関数をセットし、その中でshow関数を呼んでいるので、show関数は関数として扱われます。

ページのトップへ戻る