#調査の動機
thisを用いてオブジェクトに格納されている値を参照しにいったが取得できなかった。
thisについて調べたところ一癖あるものだとわかった。
thisについて理解したいと思い、調査に踏み切った。
thisの性質がわからず、現場で苦しんだ。。。（小声）
#調査の観点
以下の観点で調査しました。
- thisを用いてオブジェクトを参照する際に気をつけるべきこと
- スコープは気にするのか。
#調査方法
実際にソースコードで挙動を確認しました。
また下記の書籍、記事等を参考にさせていただきました。
##参考書籍
[改訂新版]JavaScript本格入門 モダンスタイルによる基礎から現場での応用まで
##参考にした記事
@mtoyopetさん
JavaScriptのthisがよくわからないので徹底的に調べてできるだけわかりやすく解説してみる
@shiminori0612さん
JavaScriptでのthis
@takkyunさん
JavaScript の this を理解する多分一番分かりやすい説明
#調査内容
##そもそもthisとはなんぞや
JavaScriptのthisは、関数内で使用すると呼び出し元のオブジェクトを参照します。
調べたところどうやら呼ばれ方次第で値が変わってくるそうです。。。
##参照先を表で展開
| 呼ばれた場所 | thisの参照先 |
|---|---|
| 関数の外 | グローバルオブジェクト |
| 関数 | グローバルオブジェクト |
| call/applyメソッド | 引数で指定されたオブジェクト |
| イベントリスナー | イベント発生元 |
| コンストラクター | 生成したインスタンス |
| メソッド | 呼び出し元のオブジェクト |
表だけ見てもわからないと思うので実際にサンプルプログラムで見ていきます。
#サンプルプログラム
通常の関数でthisを呼び出すパターンとオブジェクト内のメソッドでthisを呼び出すパターンの挙動を確認します。
function motion(){
console.log(this); // グローバルオブジェクト、ブラウザではWindowオブジェクトを参照
}
var keyPerson = {
name : 'ドラえもん',
motion : function(){
console.log(this); // KeyPersonオブジェクトを参照
}
}
motion(); // 実行結果：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
keyPerson.motion(); // 実行結果：{name: "ドラえもん", motion: ƒ}
通常の関数の場合だとWindowオブジェクトが出力されていることがわかります。
オブジェクト内のメソッドでthisを呼んだ場合は、オブジェクト自体を指し示しています（上記の表参照）。
コンストラクタを使用した際のthisは、新しいオブジェクトに結びつきます。
function TitleCall() {
this.title = 'ドラえもんはじまるよー';
}
var keyPerson = new TitleCall();
console.log(keyPerson.title); // 実行結果：ドラえもんはじまるよー
##thisの正体
今回の調査で「thisは呼び出し元のオブジェクト」を指すということがわかった。
「this.」の「.(ドット)」の前の値を指定していなければグローバルオブジェクトを参照する。
@takkyunさんの「JavaScript の this を理解する多分一番分かりやすい説明」より抜粋
this は function を呼んだ時の . の前についているオブジェクトを指しているこの文言のおかげで理解を深めることができました。ありがとうございました。
#考察
アロー関数が絡んできた場合だとどうなるのか調査しきれていないので調査完了次第更新します！！！
最後になりますが良記事を展開してくれた方々に感謝の気持ちでいっぱいです。
ありがとうございました。