※ ここで示すいくつかの例は "use strict"; を想定していません！

this の実体は変数

this の実体は「何かしらのオブジェクトを参照」している「読み込み専用」の「変数」だよ。読み込み専用なので代入できないよ

this = 5;

// ReferenceError: Invalid left-hand side in assignment

どのオブジェクトを参照しているか

「何かしらのオブジェクト」ということは、とりあえず、typeof で "object" になるものを参照するっていう認識でおｋ

そして、何のオブジェクトを参照しているかはコンテキストに応じて変化するよ。参照には一定の規則があって、関数外（トップレベル）か関数内（ローカル）かで大きく変わるよ。

関数外であるグローバルな空間での this

Webブラウザでの実行を想定した場合、this はグローバルな空間で Window オブジェクトを参照

console.log(this);

// Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

関数内では関数の呼び出し方法で参照先オブジェクトが変わる

関数の呼び出し方法で変わるっていうことは、実行時に this がセットされていくということで、4種類の呼び出しパターンがある。

関数内での this

前提：オブジェクトのプロパティである function はメソッド、そうでない場合は関数として呼び分けるよ（グローバルな空間に定義した関数は実は window オブジェクトのプロパティの1つだったりもするけど）

// メソッドを持つオブジェクト
var myObj = {
  value: "Hello World",
  greet: function(){
    console.log(this.value);
  }
};
myObj.greet();

// Hello World


// 関数
var hoge = function()
{
  console.log("hoge");
}
window.hoge(); // window は省略可能

// hoge

関数内での this はグローバルオブジェクトがセットされるよ。ブラウザを想定すると Window オブジェクト。


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

// Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

メソッド内での this

メソッド内では、そのオブジェクトがセットされるよ。この例でいうと myObj

// メソッドを持つオブジェクト
var myObj = {
  myObjFunc: function(){
    console.log(this);
  }
};
myObj.myObjFunc();

// Object {myObjFunc: function}

コンストラクタ内での this

コンストラクタ内での this は new によって生成したオブジェクトを参照するよ。この例でいうと myHoge オブジェクト

var Hoge = function(huga)
{
  this.huga = huga;
}
var myHoge = new Hoge("chrowa3");
console.log(myHoge);

apply( ) や call( ) で好きなオブジェクトへの参照をセット

call( ) や apply ( ) は他のオブジェクトが持つメソッドをさぞ自分のメソッドかのように呼び出すメソッドだよ

この例では、Hoge( ) を new することで生成された myHoge オブジェクトを this としてセットしている。

var Hoge = function(){};
Hoge.prototype.hogeFunc = function(){return this;};

var Huga = function(){};
Huga.prototype.hugaFunc = function(){return this;};

var myHoge = new Hoge();
Huga.prototype.hugaFunc.call(myHoge);

// Hoge {hogeFunc: function}

myHoge オブジェクトで Huga の hugaFunc() を call() しているよ。

hugaFunc() の処理は this を return で返しているだけなんだけど、this が myHoge でセットされているので結果的に Hoge オブジェクトが返ってきている。

(番外編) イベントハンドラ（メソッド）内での this

まず HTML ね


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>this!</title>
	<script src="this.js"></script>
</head>
<body>
	<p><a id="lnk" href="#">click</a></p>
</body>
</html>

続いて js


window.onload = function()
{
	var printThis = function()
	{
		console.log(this);
	};
	document.getElementById("lnk").onclick = printThis;
};

// <a id="lnk" href="#">click</a>

イベントハンドラ（メソッド）内での this はイベントが発生した元の要素を参照するよ

以上、this のざっペロでした