B10 : 함수의 this 키워드

목차

1. this 키워드란?

2. 함수 단순 호출에서의 this

3. 메서드 호출에서의 this

4. 생성자 호출에서의 this

5. 화살표 함수에서의 this

---

1. this 키워드란?

현재 실행 중인 문맥(context)를 참조하는 키워드이다.

 

기본 개념

• 자바스크립트에서는 함수가 호출될 때마다 실행 컨텍스트 (Execution Context)가 생성된다.
• 이 컨텍스트 안에는 this가 자동으로 들어가는데, 값이 고정되어 있지 않고 호출 방식에 따라 달라진다.

특징

• 읽기 전용 : 개발자가 직접 바꿀 수 없고, call(). apply(), bind()등의 내장 함수로 간접 제어만 가능
• 런타임에서 결정됨 : 함수가 정의될 때가 아닌 호출될 때 무엇을 참조할 지 결정
• 호출 방법에 따라 참조하는 객체가 달라진다.

그럼 호출 방법에는 어떤 것들이 있는지, 어떻게 달라지는지 알아보자.

---

2. 함수 단순 호출에서의 this

함수를 단순 호출 할 때 this는 항상 전역 객체를 참조한다.

*전역 실행문에서, 일반 함수를 호출할 때, 등등..

*전역 실행문 : JS 엔진이 코드를 실행할 때 처음으로 생성되는 문

// 1. 비엄격 모드
function func() {
  console.log(this === window);	// true
}
func();

// 2. 엄격 모드
function func() {
  'use strict';
  console.log(this === window);	// false
  console.log(this === undefined);	// true
}
func();

1. 실행 환경이 브라우저일 때
   
   1. 전역 객체는 window로, 전역 실행문에서 this는 window를 바인딩한다.
   2. 단, 'use strict'를 쓰면 undefined이다.
2. 실행 환경이 Node.js일 때
   1. 전역 객체는 global이나, Node.js의 최상위 스코프 코드가 CommonJS 모듈 스코프 내에서 실행되어,
      전역 실행문에서 this가 global을 가리키지 않는다. → this는 {}빈 객체를 바인딩
   2. 비엄격 모드에서는 global, 엄격 모드에서는 undefined를 가리킨다.

---

3. 메서드 호출에서의 this

객체의 프로퍼티 함수를 메서드라고 한다.

메서드의 this 바인딩은 해당 메서드를 소유하는 객체로 된다.

const obj = {
  lang: 'javascript',
  greeting() {
    console.log(this);
    return `hello ${this.lang}`;
  }
}
console.log(obj.greeting());	// hello javascript
console.log(greeting());	// hello undefined

 

---

4. 생성자 호출에서의 this

new 키워드를 사용하여 함수를 호출하면 생성자 함수로 동작한다.

생성자 함수 안에서 this는 새로 생성된 객체를 가리킨다.

function Vehicle(type) {
  this.type = type;
}
const car = new Vehicle('Car');	// 함수를 생성자 함수로 호출

생성자 함수를 호출하여 객체 생성 시, 동작 순서는 아래와 같다.

1. 프로퍼티 생성 : this가 바인딩한 객체의 프로퍼티 생성
   → 내부적으로 새 객체 생성   e.g. this = {}
2. this 바인딩 : 새로 생성된 객체가 this에 바인딩됨
3. 프로퍼티/메서드 정의 : 생성자 함수 내부에서 this.xxx = yyy로 프로퍼티/메서드가 객체에 추가됨
4. 암묵적 반환 : 명시적으로 다른 객체를 반환하지 않는 한, this가 바인딩된 새 객체가 반환됨

 

---

5. 화살표 함수에서의 this

화살표 함수는 정의된 시점의 상위 스코프의 this를 사용한다.

const obj = {
  name: "다연",
  arrow: () => console.log(this.name)
};
obj.arrow(); // undefined

객체를 명시하고 arrow를 호출했으나, 메서드의 경우와는 다르게 undefine가 출력된다.

화살표 함수인 arrow는 this를 가지지 않고, 상위 스코프(전역 객체 등)의 this를 사용하는데,

현재 상위 스코프에는 name이 정의되지 않았기에 undefined가 나온다.

• obj 객체 외부 (즉, 상위 스코프)에 아래 코드를 추가하면 obj.arrow();가 제대로 출력된다.
  → this.name = "다연";

 

 

 

기초부터 완성까지, 프런트엔드 (이재성|한정)

기초부터 완성까지, 프런트엔드 - 예스24