컨텍스트를 가리키는 키워드 this

this

JavaScript에서 함수 호출 방식에 따라 달라지는 컨텍스트를 가리키는 키워드

값은 함수가 어떻게 호출되었는지에 따라 동적으로 결정

 

1. 전역 컨텍스트

this가 전역 객체를 가리키며, 브라우저 환경에서는 window 객체, Node.js 환경에서는 global 객체를 나타낸다.

console.log(this); // 브라우저에서는 window 객체를 출력

 

2. 객체 메서드 컨텍스트

객체 메서드 내부에서 this는 해당 메서드를 소유하는 객체를 가리킨다.

const obj = {
  name: '홍길동',
  greet() {
    console.log(this.name); // this는 obj를 가리킴
  }
};
obj.greet(); // '홍길동' 출력

 

3. 생성자 함수 및 클래스 컨텍스트

생성자 함수 또는 클래스에서 this는 새로 생성된 인스턴스 객체를 가리킨다.

new 키워드를 사용하여 호출할 때 해당 함수나 클래스가 가리키는 객체가 this로 설정

function Person(name) {
  this.name = name;
}

const person1 = new Person('홍길동');
console.log(person1.name); // '홍길동' 출력

 

4. 함수 호출 컨텍스트

일반 함수 호출에서는 엄격 모드라면 undefined, 비엄격 모드에서는 전역 객체를 가리킨다.

function showThis() {
  'use strict';
  console.log(this); // undefined 출력
}
showThis();

 

5. 명시적 바인딩

 

• call: 함수를 호출하면서 this 값을 명시적으로 지정, 인수는 개별적으로 전달
• apply: call과 유사하지만 인수를 배열 형태로 전달
• bind: 함수를 호출하지 않고 this 값이 영구적으로 바인딩된 새로운 함수를 반환

function introduce() {
  console.log(this.name);
}

const user = { name: '홍길동' };

introduce.call(user); // '홍길동' 출력
introduce.apply(user); // '홍길동' 출력
const boundIntroduce = introduce.bind(user);
boundIntroduce(); // '홍길동' 출력

 

 

6. 화살표 함수

상위 스코프의 this를 그대로 사용, 화살표 함수는 자신만의 this를 가지지 않고, 정의된 위치에서의 this를 상속받는다.

const obj = {
  name: '홍길동',
  greet: function() {
    const arrow = () => console.log(this.name);
    arrow();
  }
};

obj.greet(); // '홍길동' 출력

 

this는 상황에 따라 동적으로 달라지므로, 상황에 맞게 잘 이해하며 사용하는 것이 중요하다.