this란?
this는 사용하는 환경에 따라서 4개 이상의 다양한 뜻이 있습니다!
- window를 뜻합니다
this라는 키워드를 콘솔창에 출력해 보도록 합시다!
console.log(this) // Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}그러면 this 키워드는 window {~~} 이런 값이 나옵니다 :)
일반 함수 내에서 this라는 값을 불러보면 똑같이 this라는 값은 window 라고 출력됩니다!
여기서 window란 뭔가요?
- window는 모든 전역변수 / 함수 / DOM을 보관하고 관리하는 전역객체입니다
- 메서드에서 this값은 그 함수를 가지고 있는 object를 뜻합니다
const obj = {
data : 'Kim',
함수 : function(){ console.log(this) }
}
obj.함수() // { data : 'Kim', 함수 : f } object 자료형 내에 함수(메서드)에서 사용할 경우엔..! this값은 메서드를 가지고 있는 object를 뜻합니다 🤓
다른 예를 들어...
const obj = {
data : {
함수 : function(){ console.log(this) }
}
}
obj.data.함수();를 하면...this 값에는 무엇이 출력될까요?
여기서 this 메서드의 오브젝트는 data 이므로..!
data가 출력되겠죠? 따라서 { 함수 : f } 가 출력됩니다 :)
그렇다면...첫 번째 뜻에서 일반 함수에 this를 썼을 때 window가 출력되는 것은! 함수()를 쓰면 전역변수나 전역함수를 관리하기 위한 window라는 오브젝트가 자동으로 추가되기 때문에..! 일반 함수에서 this를 쓰면 window가 출력되는 것입니다 🤭 일반 함수의 오브젝트는 window 라는 것입니다 ㅎㅎ
- constructor 안에서 쓰면 constructor로 새로 생성 되는 오브젝트를 뜻합니다
자바스크립트에서 오브젝트를 비슷한 걸 여러 개 만들고 싶을 경우에..! 오브젝트를 복사하는 게 아니라 constructor 라는 걸 만들어서 사용합니다 :) 쉽게 말하면 constructor는 오브젝트 복사해서 생성해 주는 기계입니다.
function 기계 () {
this.이름 = 'Kim'
}이런 식으로 만든다면..여기서의 this는 기계로부터 새로 생성될 오브젝트들을 의미합니다!
function 기계 () {
this.이름 = 'Kim'
}
const obj = new 기계()이렇게 new 키워드를 이용하면 새로운 오브젝트를 꺼낼 수 있습니다!
여기서 새로운 obj는 this 키워드 덕분에 {이름 : 'Kim'} 이라는 값을 가지고 있습니다 😆
- eventlistener 안에서 쓰면 this는 e.currentTarget이라는 의미입니다
document.getElementById('버튼').addEventListener('click', function(e){
console.log(this)
});여기서 this는 e.currentTarget이라는 뜻과 같습니다!
e.currentTarget은 지금 이벤트가 동작하는 곳을 의미합니다 :)
