[JS]thisは1階層上のオブジェクトを指すと思えば覚えやすい件

いきなりポイントから

先輩に教わったのだが、JavaScriptにおいてthisは1階層上のオブジェクトを指すらしい。
その軸で、色々と確認してみよう。

とりあえずthisを出力してみた

function test(){
    console.log(this);
}
test(); // window{......}

とりあえず、thisをconsole.logしてみたら、「window」というものが出て、相当長いものが出力されました。
調べてみたら、これはグローバルオブジェクトというものが出力されたみたい。
ちなみに、ブラウザにおいては、このグローバルオブジェクトはwindowオブジェクトと呼ばれているらしい。
つまり、この際のthisは、testメソッドの1階層上であるグローバルのオブジェクトを指したようだ。

メソッドの呼び出し

よくある、オブジェクト内のメソッドを呼び出すパターン。

1.簡単な例

const obj = {
    value: 'あああ',
  show : function(){
    console.log(this.value);
  }
}
obj.show(); // =>あああ

ここでのthisには「obj」が入っています。
↓試しに、この「this」をobjに変えても、実行されます。

2.試しに「this」を「obj」に変えてみた

const obj = {
    value: 'あああ',
  show : function(){
    console.log(obj.value); //thisをobjに書き換えてる
  }
}
obj.show(); // =>あああ  // これでもうまく実行される

やはり、thisは1階層上のものを指しているということで説明できそう。

結論

他にも様々な、例外パターン等もありそうだけど、一旦こう覚えておくと良さそう。
thisは1つ上の階層のオブジェクトを指していることが多い
初心者なので、ツッコミあればぜひコメントください。
よろしくお願い致します。

ちなみに

windowオブジェクトに直接代入していみたら、いけました。

window.test = 'あああ';
console.log(this.test); // => あああ