[Javascript] this 알아보기
this 알아보기
this는 상황에 따라서 계속해서 달라진다. this에 대해서 알아보기 위해서 console.log를 여러 곳에서 찍어보자.
- window 전역 객체와 같은 global context에서 호출된 this
global하게 호출된 this의 경우 window 객체와 같은 결과물이 나온다.
// console.log(window); 와 같다.
console.log(this);
- object 내부의 this
object 내부 this는 해당 object 자기 자신을 가리키게 된다.
let person = {
firstName: "",
lastName: "",
fullName: function(){
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName());
- function 내부의 this
function 내부의 this는 global에서 선언한 this와 같게 window 객체를 의미한다.
함수 내부의 함수에 있는 this도 window이다.
function thisFunction() {
console.log(this); // this는 window
function insideFunc(){
console.log(this); // this는 window
}
}
- 이벤트리스너에서의 this
이벤트리스터에서 this는 이벤트를 발생시킨 객체가 된다.
예를 들어 button의 onclick에 this가 선언되있다면 해당 element를 의미한다.
// 해당 this는 속해있는 element인 button을 뜻하므로, button의 배경색이 blue가 된다.
<button type="button" onclick="this.style.backgroundColor="blue">클릭1</button>
// callFunc에 this를 던져주는데, this는 해당 element인 button이다.
<button type="button" onclick=callFunc(this)>클릭2</button>
function callFunc(obj){
console.log(obj)
}
Author And Source
이 문제에 관하여([Javascript] this 알아보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@devmag/Javascript-this-알아보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)