JavaScriptのthisを理解する

thisについて、恥ずかしいことに１つ勘違いして理解していた点があったので、自分の中で頭を整理した。

まず、thisを一言で説明すると、次の通りだ。

thisとは、関数内ではthisを使用中の関数をメンバに含むオブジェクト*1を指し、トップレベルコード*2ではグローバルオブジェクトを指すキーワード。

下記のJavaScriptを例に解説する。
thisは10行目と13行目と15行目の3箇所で使用されている。

まず、10行目。

1. thisを使用中の関数は、say関数だ。
2. sayをメンバに含むオブジェクトは、graySpaceオブジェクトだ。
3. 従って、10行目のthisは、say関数をメンバに含むgraySpaceオブエジェクトを指すので、this.nameはgraySpace.nameと等価である。
4. 故に、10行目のthis.nameは文字列「graySpace」である。

次に、13行目。

1. thisを使用中の関数は、loadイベントのイベントハンドラだ。
2. このイベントハンドラをメンバに含むオブジェクトは、windowオブジェクトだ*3。
3. 従って、13行目のthisは、イベントハンドラをメンバに含むwindowオブジェクトを指すので、this.nameはwindow.nameと等価である。
4. 故に、13行目のthis.nameは文字列「global」である。

最後に、15行目。

1. 関数の一部ではないJavaScriptコード部分でthisが使用されている。
2. つまり、15行目のthisは、トップレベルコードで使用されているのでグローバルオブジェクトwindowを指し、this.nameはwindow.nameと等価である。
3. 故に、13行目のthis.nameは文字列「global」である。

*1:「実行中のコードが「自分自身」を表すオブジェクトにアクセスするためのキーワード」といった説明のされ方もあるが、個人的にはその説明では理解できなかった。

*2:トップレベルコードとは関数の一部ではないJavaScriptコード部分

*3:勘違いしていたのはここ。「実行中のコードが「自分自身」を表すオブジェクトにアクセスするためのキーワード」という説明でthisを理解していて、この場合「自分自身」を表すオブジェクトはイベントハンドラだと理解していたが、これは大間違い。関数オブジェクトそのものではなく、関数オブジェクトが定義されているオブジェクトを指すのだ。