This

1. 자바스크립트의 this란?

 

자바스크립트에서 "this" 란 현재 실행중인 함수나 메서드 내에서 현재 객체를 참조하는 특별한 키워드이다. 이것은 실행 컨텍스트에 따라 동적으로 결정된다.

 

2. "This"의 값은 어떻게 결정되는 것인가?

 

"This"의 값은 호출한 컨텍스트에 의해 결정된다. 주로 다음과 같은 상황에서 "This"가 결정된다.

 

• 2.1 전역컨텍스트에서의 "this"

전역스코프에서의 "This"는 전역 객체를 참조한다. 브라우저 환경에서는 "window" 객체를 참조한다.

console.log(this === window); // true (브라우저 환경)

 

• 2.2 함수 내부에서의 "this"

함수 내부에서의 "This"는 호출한 방법에 따라 다르게 설정된다.

 

• 일반 함수 호출 : "this"는 전역 객체를 가르킨다.
• 메서드 호출 : "this"는 해당 메서드를 소유한 객체를 가르킨다.

function sayHello() {
  console.log(this);
}

sayHello(); // 전역 객체를 가리킴

const obj = {
  greet: sayHello
};

obj.greet(); // obj 객체를 가리킴

 

• 2.3 이벤트 핸들러에서의 "this"

이벤트 핸들러 내에서의 "this"는 이벤트를 발생시킨 "DOM" 요소를 가르킨다.

document.getElementById('myButton').addEventListener('click', function() {
  console.log(this); // 클릭된 버튼 요소를 가리킴
});

 

• 2.4 생성자 함수에서의 "this"

생성자 함수내에서의 "this"는 생성된 객체를 가르킨다.

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

const person1 = new Person('Alice');
console.log(person1.name); // 'Alice'

 

3. "this"를 명시적으로 바인딩하기

 

"this"를 명시적으로 원하는 대상에 바인딩 하기 위해서는 bind, call, apply와 같은 메서드를 사용할 수 있다.

const obj = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, ${this.name}`);
  }
};

const sayHelloToAlice = obj.sayHello.bind({ name: 'Alice' });
sayHelloToAlice(); // 'Hello, Alice'

 

4. "this"의 주의사항

 

• 화살표 함수 내부에서의 "this"는 자신을 둘러싼 스코프의 "this"를 상속받는다.
• 비동기 함수 내부에서의 "this"는 전역객체를 가르킬수 있으므로 주의가 필요하다.

const obj = {
  name: 'Alice',
  sayHello: () => {
    console.log(`Hello, ${this.name}`); // 화살표 함수에서 "this"는 상위 스코프를 가리킴
  }
};

obj.sayHello(); // 'Hello, undefined' (전역 객체의 name 속성을 참조)