JS学習記録第11回　thisに挙動ついて

こんばんは！
最近少し忙しく、JSの学習が疎かになっていましたので、
今月からまた再開しようと思います！
今回は「this」についてです。
thisは「これ」という意味で皆さんもよく知っているかと思います。
そこで今回はJavaScriptでのthisについてまとめてみたいと思います。

thisについて

thisはJSでよく使用されます！
文章では伝えづらいので、例を上げます。

const a ={
   place : '大阪',
   b : function(){
       console.log('私の出身地は' + this.place + 'です');

   },
}
a.b();

例えばこのような感じの時に使用します。
上記はaとい変数の中にオブジェクトで
placeは大阪、
bという関数で「私の出身地は'大阪'です」を出力
変数aの中の関数bを実行する。

という記述になります。
thisはこれという意味になるので、
ここでは変数aのplaceを指すことになります。
因みに、
this.placeをa.placeに変更しても同じ出力結果が返ってきます。

なんだthisはこれという意味で意外と簡単じゃん！
と思うのですが、そう簡単にというわけでもなく。。。

関数でのthisの挙動

では次のコードはどうでしょうか？
先程実行したa.b()を変数refに入れてみます。

const a ={
   place : '大阪',
   b : function(){
       console.log('私の出身地は' + this.place + 'です');

   },
}

const ref = a.b;
ref();

そうすると、
大阪という部分が取得できず、
undefined(見つかりません)と出てしまいます。

これは何故なのでしょうか？
thisが取得する条件として以下のようにまとめることができるそうです。

オブジェクトとして実行された場合、
thisは呼び出し元のオブジェクトを読む。
関数として実行された場合、
thisはグローバルオブジェクトとして読む。

今回のコードを見てみると、
a.b()を変数refに入れ、関数ref()として実行しているので、
thisの値が取得出来なかったということになります。
仮に、変数aの外側にwindow.place = '東京',を記述すると、、

window.place = '東京';

const a ={
   place : '大阪',
   b : function(){
       console.log('私の出身地は' + this.place + 'です');

   },
}

const ref = a.b;
ref();

東京が取得されます。
thisは呼び出し元から直接実行しないとオブジェクト内からは取得出来ないということですね！

callback関数でのthisの挙動

次にcallback関数でのthisの挙動についてみてみます。

window.place = '東京';

const a ={
   place : '大阪',
   b : function(){
       console.log('私の出身地は' + this.place + 'です');

   },
}


function ref(callback){
   callback();
}

ref(a.b);

こちらに関しても、
thisはwindowオブジェクトの'東京'を取得していることがわかります！

thisの束縛

ここでどうしても関数内でthisを束縛したい！
と思う時があるかもしれません！
そういう時に便利なのがbindというプロパティです！
このbindというものを使用すれば、thisを束縛し、優先度を決めることができます！
例を見てみます！

window.place = '東京';

const a ={
   place : '大阪',
   b : function(){
       console.log('私の出身地は' + this.place + 'です');

   },
}


function ref(callback){
   callback();
}

const sokubaku = a.b.bind({place:'大阪'});

ref(sokubaku);

注目してほしい箇所は、以下の記述です。
const sokubaku = a.b.bind({place:'大阪'});
solubakuという変数を新しく作成し、
aの中のbの中にあるplace'大阪'をbindで束縛する！
という意味になります！

こちらのbindを設定することによって自由にthisの参照先を設定できることができるんですね(^ ^)

まとめ

thisの挙動は、
オブジェクトとして実行された場合、
thisは呼び出し元のオブジェクトを読む。
関数として実行された場合、
thisはグローバルオブジェクトとして読む。
thisを束縛したい場合は、
bindプロパティを使用する。

になります。
やはり手を動かしながら慣れないといけないですね。。。
頑張ります！