javascript 의 this 는 다른 언어에 비해 까다로운 것 같다.
차일 피일 미루다, this 에 대해 정리하는 시간을 갖게 되었다.
this란?
- this는 함수의 현재 실행 Context이다. (무슨 소리여?!)
실제 코드를 보면서 이해해보자.
- 코드 1-
결과가 어떻게 나올까 예상해보자.
- 코드 1 실행 결과 -
결과를 보면, 해당 코드는 피자의 직원가, 판매가를 제대로 알려주지 않는다.
1. 왜 피자의 직원가는 25000원인가?
- 객체의 프로퍼티로 만들어진 getPrice 함수는 실행시 scope가 새로 생성되지만, this는 스코프 영역과는 상관없이 해당 함수를 포함한 pizza 객체를 가리킨다.
따라서 this.cost의 결과값으로는 pizza.cost 의 값인 25000원이 나오는 것이다.
2. 그렇다면, 피자의 판매가는 왜 NaN인가?
- price값을 할당하는 시점에 this가 가리키는 것은 Window 이다. Window에는 cost라는 프로퍼티가 없으므로 this.cost를 콘솔에 찍어보면,undefined다.
따라서 undefined 값에 숫자10000을 더해줌으로써 NaN(Not a Number) 가 출력되는 것이다.
사용할 때는 몰랐는데, 막상 알면 알수록 deep해지는 this에 대해 순차적으로 정리해보도록하겠다.
1부 끝.
'개발이야기 > javascript' 카테고리의 다른 글
| [jQuery] selector 정리 (0) | 2019.05.02 |
|---|---|
| [javascript] this 알기 - 2부 (0) | 2018.09.17 |