[Javascript] this

 

리액트 하다가 헷갈려서 정리해 본다.

 

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

someone.whoAmI();

 

콘솔에 jy

 

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

someone.whoAmI();

var myWhoAmI = someone.whoAmI;
myWhoAmI();

 

결괏값 : 1행 jy 2행 window 어쩌고

1 - somone.whoAmI() 실행 시에는 someone이 있고

2 - myWhoAmI() 실행 시에는 실행할 대상이 없어서 윈도우가 실행한다.

 

 

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

someone.whoAmI();

var myWhoAmI = someone.whoAmI;
myWhoAmI();

var btn = document.getElementById('btn');
//1
btn.addEventListener('click', someone.whoAmI);

//2
btn.addEventListener('click', someone.MyWhoAmI);

(btn이라는 버튼이 다른 곳에 있다고 한다고 가정한다)

1의 (btn이후)의 클릭 결과는 콘솔에 <button>~~~</button>이 나온다

2도 같다.

this는 호출한 놈...(누가 실행했느냐?)

 

 

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

someone.whoAmI();

var myWhoAmI = someone.whoAmI;
myWhoAmI();

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

//1
bindedWhoAmI();
var btn = document.getElementById('btn');

//2
btn.addEventListener('click', someone.bindedWhoAmI);

1,2에서 클릭 실행시 콘솔에 결과는 jy 

 

자바스크립트에서는 this는 호출할 때 호출한 놈으로 결정된다.

 

출처

https://www.youtube.com/watch?v=PAr92molMHU