[ Javascript ] This 란 무엇인가?

This

this 란 함수를 호출할 때 생성되는 실행 컨텍스트 프로퍼티이다.

This 가 가리키는 값은 함수가 호출되는 방식에 따라 다릅니다. 식별자 this 는 함수가 호출되는 방식에 따라 this 가 가리키는 값이 동적으로 결정됩니다. 이를 바인딩이라고 합니다.

this 바인딩

1. 전역 객체 바인딩

• 함수가 전역에서 호출되면 this 는 전역 객체를 가리킵니다.
• 브라우저 환경에서 전역 객체는 window, Node.js 환경에서 전역 객체는 global 입니다.

function foo() {
  console.log(this);
}
foo(); // window

 

2. 객체의 메서드 호출

• 함수가 객체의 메서드로 호출되면 this 는 객체를 가리킵니다.

const obj = {
  foo() {
    console.log(this);
  },
};
obj.foo(); // obj

3. 생성자 함수 호출

• 함수가 생성자 함수로 호출되면 this 는 생성자 함수가 생성할 인스턴스를 가리킵니다.

function Foo() {
  console.log(this);
}
new Foo(); // Foo {}

• 생성자 함수가 생성할 인스턴스는 this 를 통해 접근할 수 있습니다.

function Foo() {
  this.name = "Lee";
}
const foo = new Foo();
console.log(foo.name); // Lee

4. 콜백 함수 호출

• 함수가 콜백 함수로 호출되면 this 는 전역 객체를 가리킵니다.

const obj = {
  foo() {
    setTimeout(function () {
      console.log(this);
    }, 100);
  },
};
obj.foo(); // window

5. 함수로서 호출

• 함수가 함수로서 호출되면 this 는 전역 객체를 가리킵니다.

function foo() {
  console.log(this);
}
foo(); // window

 

Reference

• 자바스크립트 this란 무엇인가