[Frontend Study] Day 9 - javascript: this 개념

자바스크립트의 this는 4가지 종류의 문맥으로 구분할 수 있다.

 

• 함수 실행
• 메소드 실행
• 생성자 실행
• 간접 실행

1. 함수 실행

---

함수 실행과 메소드 실행의 차이점을 알아보겠다.

- 5라인에서 실행하고 있는 것은 hello라는 함수를 실행하고 있는 것이다.

- 6라인에서 실행하고 있는 것은 자바스크립트에서 제공하는 console 객체의 log메소드를 호출하고 있는 것이다.

 

함수 실행에서의 this 

함수 실행에서 this 는 전역 객체를 가리킨다.

 

한번에 이해할 수 있는 예시로 코드를 하나 가져와봤다.

함수 문맥으로 sum이 실행되었고, this는 sum() 안에 존재하는 전역객체이므로 window를 가리킨다.

3라인에서 this가 활용되면서 sum 함수가 호출되면 자바스크립트가 자동으로 this에 전역 객체를 세팅한다.

웹 브라우저 환경에서의 전역 객체로 window가 존재한다. 13라인에서 이 사실을 확인하고 있다.

 

하지만 this가 window 객체를 가리키는 것은 어디까지나 실행 문맥이라는 전제가 있다.

 

2. 메소드 실행

---

여기서 helloFunction은 메소드이며, 메소드는 객체 내부의 속성으로 정의된다.

여기서 helloFunction은 myObject 내부의 속성이다. 따라서 6라인에서 속성 접근자를 사용해서 메소드 호출을 하고 있다.

이렇게 메소드를 실행하기 위해서는 반드시 속성 접근자를 사용해야한다.

 

메소드 실행에서의 this

메소드에서의 this는 메소드를 소유하고 있는 객체를 가리킨다.

객체 내부의 속성으로 정의된 함수가 실행될 때, this는 객체 자신이 된다.

increment는 객체 내부의 메소드로 정의되고 있다. 여기서 this는 calc를 가리킨다. 

따라서 increment가 return 하고 있는 값은 calc 객체 내부 속성인 num이다.

결과적으로 9, 10라인에서 증가가 정상적으로 작동한다.

 

3. 생성자 실행

---

생성자 실행은 표현식 앞에 new 키워드가 붙었을 때, 함수 객체로써 실행되는 것을 뜻한다. 

ex) new RegExp('\\d)

 

Country나 프로토타입 설정에서 쓰인 this는 함수내에서 쓰였으므로 전역 객체 window를 가리킨다고 생각할 수 있지만, 아니다.

this가 전역 객체를 가리키는 것은 함수의 실행 문맥이다. 하지만 이 예제에서는 생성자의 실행 문맥을 따른다.

constructor라는 특수 메소드에 사용되는 this는 새로 만들어진 객체를 가리키게 된다.

 

생성자 실행에서의 this

생성자의 실행에서의 this는 새롭게 만들어진 객체를 가리킨다.

 

여기서 this의 문맥은 Foo의 인스턴스가 된다. 생성자 실행시에 Foo의 내부에서는 초기값이 설정되었고, this.property에 'Default Value'가 할당되었다.

 

4. 간접 실행

---

간접 실행은 함수가 메소드 호출을 통해서 실행되는 것을 말한다.

 

이런식으로 매개변수를 넘겨서 간접적으로 실행할 수 있다. 

 

간접 호출에서의 this

call(), apply() 호출에서 this는 첫번째 매개변수를 가리킨다.

 

call() 실행을 통해서 간접 실행이 수행되면 concatName 내부의 this는 call()의 첫번째 매개변수인 rabbit를 가리키게 된다.

따라서 this.name은 rabbit 객체 내부의 name 프로퍼티를 참조할 수 있게 되는 것이다.