Muscardinus

this keyword - 2탄 본문

FrontEnd/JavaScript Basics

this keyword - 2탄

Muscardinus 2020. 10. 13. 01:34
728x90

1. Regular function call (일반 함수 실행 방식)

위 코드의 결과 값은 15이다

 

this가 실행되는 곳은 맨 마지막 줄의 printAge 함수이다.

특별한 것 없이 함수 이름 만을 이용하여 실행하는 경우,

즉 일반 함수 실행 방식에서는 해당 함수의 this 값은 Global Object 이다. 브라우저에서는 window 객체이다.

 

Chrome Console 창 사용

 

1탄에 있었던 코드를 다시 보자 (출력 값: 15)

this가 사용되는 함수는 muscardinus라는 객체의 printAge 라는 속성으로 할당되어 있다.

하지만 항상 기억해야할것! 함수의 선언이나 할당은 this의 값과 무관하다

해당 함수의 실행되는 부분은 맨 마지막 줄이고 일반 함수 호출 방식으로 실행된다. 그렇기에 this 값은 Global Object이다

 

참고 (Strict Mode) this -> undefined

Strict Mode에서 함수가 일반 함수 실행 방식으로 실행되더라도,  this 값은 Global Object가 아닌 undefined이다.

따라서 해당 코드에서 this는 undefined이기에 Error가 발생한다

 

2. Dot Notation

출력값

더보기

35

100

마지막 두 줄을 보면 결과적으로 두 줄은 같은 함수를 실행한다. 하지만 결과값은 다르다. 그 이유는 바로 함수를 실행하는 방식이 다르기 때문이다! 또 한 번 강조한다. this는 함수의 할당이나 선언과 전혀 무관하다!!!

 

마지막에서 두 번째 줄을 보면

printAge 앞에 muscardinus를 놓고 Dot을 가지고 있다

 

Dot Notation을 이용하여 함수를 실행할 경우, 해당 함수 내부의 this는 Dot 앞에 있는 객체를 가리킨다. 즉 muscardinus를 가리키게 된다. 그리고 muscardinus의 age는 35이다

 

 

문제

출력 값

더보기

'Adult'

 

728x90

'FrontEnd > JavaScript Basics' 카테고리의 다른 글

Writing Optimized Code  (0) 2020.11.30
What is JavaScript Engine?  (1) 2020.11.30
this keyword - 마지막  (0) 2020.10.19
this keyword - 3탄  (0) 2020.10.15
this keyword - 1탄  (0) 2020.10.13
Comments