this
- 함수 호출 시, 각각의 함수(실행컨텍스트)에 생성되는 특별한 값이다.
- 함수의 호출 방법에 따라
this
의 값은 바뀐다.this
는 고정된 값이 아니다.
호출 방식 | this가 가리키는 값 |
객체 메소드 | 메소드를 호출하고 있는 객체 |
일반 함수 | strict mode : undefined / sloopy mode : window 전역객체 |
화살표 함수 | 부모 스코프의 this 값 (화살표 함수는 자신만의 this 값을 가지지 않는다.) |
이벤트 리스너 | 이벤트가 동작하고 있는 DOM element |
Example
- 객체 메소드 호출
const hyejung = {
year : 1997,
calcAge : function() {
console.log(2022-this.year);
}
}
//this -> hyejung객체
hyejung.calcAge(); //25
const mountains = {
year : 2019
}
mountains.calcAge = hyejung.calcAge; //Method Borrowing
mountains.calcAge(); //3
- 일반 함수 호출 : this 값을 읽어오지 못한다. (undefined이기 때문에)
const f = hyejung.calcAge;
f();
//Uncaught TypeError: Cannot read properties of undefined (reading 'year') at...
'JavaScript > JavaScript' 카테고리의 다른 글
[JavaScript] arr.sort() 메서드 (배열의 정렬) (0) | 2022.05.19 |
---|---|
[JavaScript] 원시타입 vs 참조타입 (0) | 2022.04.24 |
[JavaScript] 호이스팅 & TDZ (0) | 2022.04.12 |
[JavaScript] 비트 연산 Bit Operation (0) | 2022.03.20 |
[JS] 전위 연산자, 후위 연산자 (0) | 2022.02.08 |