🦊

JavsScript thisについて

2023/10/21に公開

JavaScript

this

tech

JavsScriptを利用しているのにthisについて一度も考えたことがない..です。
今回会社でthisの話が出たので考える機会をもらいました！

私が考えたthisとは英語のそのままその対象のことじゃないの？って考えてました。
もっと意味を確実にしてないと。。！の上司の話を聞いてもっと調べようと。。

thisは同じ関数を呼び出すとき決める...!って
詳しく調べよう...

someone.whoAmI()を呼び出したらnameがちゃんと出てます。
呼び出すの方法によって違うから他の方法でもやってみましょう

え、、結局whoAmIは同じなのになんで...って考えます。

var someone = { 
	name : "sunny", 
	whoAmI : function(){ 
	console.log(this); 
}};
someone.whoAmI();

someone.whoAmI(); someoneを直接呼び出す

var myWhoAmI = someone.whoAmI
myWhoAmI()

myWhoAmI()はグローバルにあるのでwindowがら呼び出すことになります。
なので呼び出すことによってconsoleが違います

var someone = { 
	name : "sunny", 
	whoAmI : function(){ 
	console.log(this); 
}};
someone.whoAmI();

var myWhoAmI = someone.whoAmI
myWhoAmI()

var btn = document.getElemnetById('btn');
btn.addEventListener("click", someone.whoAmI)
btn.addEventListener("click", myWhoAmI)

btnをクリックするとsomeone.whoAmI,myWhoAmIではなく、<button id="btn"></button>が実行されます。
理由は誰が実行したかによって違うからsomeone.whoAmI,myWhoAmIが実行されんいです。

ここでわかるのは
誰が実行したの！ === this

じゃあ、btnでthisを呼び出したい時はどうすれば。。？
bind()を使えばできます！

var someone = { 
	name : "sunny", 
	whoAmI : function(){ 
	console.log(this); 
}};
someone.whoAmI();

var myWhoAmI = someone.whoAmI
myWhoAmI()

var bindedWhoAmI = myWhoAmI.bind(someone)
bindedWhoAmI()

var btn = document.getElemnetById('btn');
btn.addEventListener("click", someone.whoAmI)
btn.addEventListener("click", myWhoAmI)

{name: sunny, whoAmI: f}consoleで見れます。
bind()で固定されたので、、です。

Discussion