this 는 상황에 따라서 의미가 바뀐다.
1. 그냥 쓰거나 일반 함수 안에서 쓴다면
window 라는 의미로 쓰인다.
그런데 만약 엄격모드, 즉 use strict 모드에서 일반함수 내에 this를 사용하면 this는 undefined 이 된다.
--- window 란? ---
window 란 자바스크립트 기본 함수들을 가지고 있는 object 이다.
자바스크립트 에서는 { window} 라는 기본 오브젝트가 있고, 그 안에 함수나 변수를 보관한다.
이거를 global object 라고 한다. (전역변수 보관소)
또한, window는 자바스크립트 기본 함수모음. HTML DOM 이라는 것도 맞는말이다.
그래서 함수() 이렇게 호출하는 것과, window.함수() 이렇게 호출하는 것이 같다.
2. 오브젝트 내의 함수(즉, 메소드) 안에서 this 를 쓰면
그 함수를 가지고 있는 오브젝트를 뜻한다.
쉽게 말하면, 메소드의 주인님을 말함.
주의할 점은 최상위 오브젝트 라고 인식하지 말것.
let 오브젝트 ={
data : {
함수 : function (){
console.log(this)
}
}
}
오브젝트.data.함수();
여기서 this 값은 {함수 : f}
그렇다면 일반 함수가 아닌 화살표 함수에서는 어떨까?
let 오브젝트 ={
data : {
함수 : () => {
console.log(this)
}
}
}
오브젝트.data.함수();
화살표 안에서 this는 부모요소 혹은 상위요소 에 있는 this 값을 물려받아 사용한다.
한마디로 화살표 함수 내부에서 this는 this 값을 재설정 하지 않는다는 말.
추가로
data: {함수 (){console.log(this)}} 이것도
data의 value 값에 새로운 object안에 함수 라는 key의 value를 설정하는 것이다.
근데 이렇게 따지면 일반함수 에서 쓰인 this 와, 오브젝트 내의 함수 즉 메소드 안에서 쓰인 this는 개념이 같다.
그 함수를 가지고 있는 오브젝트를 뜻하기 때문.
3. 오브젝트 생성기계( constructor) 안에서 쓰면
this 는 새로 생성되는 오브젝트(즉, instance)를 말한다.
우리는 비슷한 오브젝트들을 많이 만들어야 할 때에 함수를 이용해서 오브젝트 생성 기계를 만들 수 있다.
constructor 에 대해서는 추후 다시 정리.
4. 이벤트 리스너 안에서 this를 사용하게 되면,
e.currentTarget의 의미로 사용된다.
이게 뭐냐면, 지금 이벤트가 동작하고 있는 곳 의미.
여기서 잠깐!
e.currentTarget 과 e.target 의 차이는?
e.target : 내가 클릭한 요소. 이벤트가 위임되어 발생하는 자식의 요소를 반환한다.
e.currentTarget : 이벤트가 부착된 부모의 위치를 반환한다.
유의할 점.
'JS (Java Script)' 카테고리의 다른 글
object 값을 변경하기, 혹은 변경하지 못하게 하기. (0) | 2023.09.04 |
---|---|
화살표함수 () => {} 에 대해서 (0) | 2023.09.04 |
프로토콜 도메인 경로 정리. (0) | 2023.09.04 |
데이터 베이스 (feat. 파이어 베이스_ 파이어 스토어) (0) | 2023.09.04 |
e.originalEvent.dataTransfer.setData() (0) | 2023.08.31 |