- 호출한 놈 === this
다음 코드를 콘솔에 실행해보면서 천천히 알아보자
const someone = {
name : 'juno',
whoAmI : function(){
console.log(this)
}
}
someone.whoAmI()
---> {name: 'juno', whoAmI: ƒ}
someone은 object로 이루어져있고, someone의 key로 value에 접근해 해당 함수를 호출해 본 결과
object 전체가 출력되었다. 이는 호출한 object가 someone이기 때문에 object가 출력된 것이다.
아래에 이어서 코드를 추가해 보았다.
const someone = {
name : 'juno',
whoAmI : function(){
console.log(this)
}
}
someone.whoAmI()
const myWhoAmI = someone.whoAmI;
console.log(myWhoAmI);
--> ƒ (){
console.log(this)
}
myWhoAmI 변수를 선언해서 someome.whoAmI의 value를 넣어 출력한 값이다.
myWhoAmI에 'console.log(this)'가 담긴 함수가 있는것을 확인할수있고, 이 함수는 실행이 되지않았다.
실행하기위해 console.log(myWhoAmI); 부분을 myWhoAmI(); 로 바꾸면
const someone = {
name : 'juno',
whoAmI : function(){
console.log(this)
}
}
someone.whoAmI()
const myWhoAmI = someone.whoAmI;
myWhoAmI();---> Window {window: Window, self: Window, document: document, name: '', location: Location, …}
이와 비슷하게 출력 될 것이다. 이는 window(전역객체)를 불러온 것이다.
중간정리
1. someone.whoAmI()는 someone에서 this가 담긴 함수를 호출한 것이다.
2.myWhoAmI()는 어디에도 소속되있지 않았고 최상위 객체를 즉, window를 호출한 것이다.
(그냥 콘솔에 this를 입력했을때와 똑같은 결과값이 나온다.)
한 번 더 알아보기
다음은 botton을 만들어서 확인해보자.
<!DOCTYPE html>
<html>
<body>
<button id="btn">버튼</button>
</body>
<script>
const someone = {
name : 'juno',
whoAmI : function(){
console.log(this)
}
}
const myWhoAmI = someone.whoAmI;
const btn = document.getElementById('btn');
1. btn.addEventListener('click',someone.whoAmI);
2. btn.addEventListener('click',myWhoAmI);
</script>
</html>위 코드를 복사해서 html파일로 저장한후 파일을 열고,
버튼을 눌러봐서 콘솔 창을 확인해보자.
1번 2번은 하나씩 주석처리하면서 결과값을 비교해보자.
---> <button id="btn">버튼</button>둘 다 해당 값이 출력되는 것을 볼 있다.
이는 button을 통해 호출했기 때문에 두 함수는 호출한 놈(object)를 가리킨 것이다.
아래는 내가 짠 코드의 일부분이다.
const audio = document.getElementById('player');
const audioVolume = document.getElementById('volume-control');
audioVolume.addEventListener("change", function(e) {
audio.volume = this.value/10;
})audioVolume에 'change' 이벤트가 생기면 해당함수가 실행되어, audio.volume에 this.value/10을 넣는건데,,
여기서 this는 audioVolume을 가르킨다. 왜냐하면 'change' 이벤트는 audioVolume에서 일어나고, audioVolume이 호출하여 실행되기 떄문이다.
결론
this는 호출한 놈(object)이 누군지 정확히 확인 후 사용하는 것이 좋다.
