![見出し画像](https://assets.st-note.com/production/uploads/images/71640296/rectangle_large_type_2_24a61df8045559d3444467b2625d9c65.png?width=1200)
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プロパティを使用する。
になります。
やはり手を動かしながら慣れないといけないですね。。。
頑張ります!
この記事が参加している募集
大阪在住の29歳。web制作会社勤務。noteを通してたくさんの出会いを作っていきたいです。台湾が大好きで中国語勉強中。日台夫婦。日々の挑戦の記録や、社会の生きづらさ、台湾のことなどを書いていこうと思います。2023年台湾に移住予定です。