JavaScript 실행 컨텍스트와 ThisBinding 소개, 생성 방법

JavaScript 실행 컨텍스트와 ThisBinding 소개, 생성 방법

 

 

JavaScript에서 실행 컨텍스트는 코드가 실행되는 환경을 추상화하며, 이 컨텍스트에는 this 바인딩(ThisBinding)이라는 중요한 객체가 존재합니다. ThisBinding는 this 키워드의 참조 대상을 나타내며, 함수가 어떻게 호출되는지에 따라 동적으로 설정됩니다. 이 글에서는 ThisBinding의 역할과 예시 코드를 통해 자세히 알아보겠습니다.

 

 

ThisBinding(디스 바인딩)의 역할

 

ThisBinding의 정의

ThisBinding는 현재 실행 중인 함수에서 this 키워드가 참조하는 객체를 가리킵니다. 함수 호출 방식에 따라 this가 동적으로 설정되며, 함수 내부에서 this를 통해 객체의 프로퍼티와 메서드에 접근할 수 있습니다.

 

ThisBinding의 설정 시기

ThisBinding은 함수가 호출될 때 동적으로 설정됩니다. 함수가 어떻게 호출되는지에 따라 this가 참조하는 객체가 달라질 수 있습니다.

 

 

예시 코드로 ThisBinding 이해하기

var person = {
  name: "Alice",
  greet: function() {
    console.log("안녕, " + this.name);
  }
};

var john = {
  name: "John"
};

person.greet(); // "안녕, Alice" 출력
person.greet.call(john); // "안녕, John" 출력

 

ThisBinding 설정

• person 객체의 greet 함수는 person 객체를 가리키는 this 바인딩을 가지고 있습니다.
• person.greet()를 호출하면 this는 person 객체를 참조하므로 "안녕, Alice"가 출력됩니다.
• call 메서드를 사용하여 this를 john 객체로 설정하면 "안녕, John"이 출력됩니다.

 

 

ThisBinding의 동작 원리

 

함수 호출 방식에 따른 ThisBinding

• 설정 일반 함수 호출: this는 전역 객체(window)를 참조합니다.
• 메서드 호출: this는 해당 메서드를 호출한 객체를 참조합니다.
• call 또는 apply 메서드 호출: this를 지정한 객체로 설정합니다.

 

 

끝으로

 

JavaScript의 실행 컨텍스트와 ThisBinding는 함수 호출 시 this의 참조 대상을 결정하는 중요한 역할을 합니다. 함수가 어떻게 호출되는지에 따라 this가 동적으로 설정되므로, this를 이해하면 객체의 메서드와 프로퍼티에 접근하는 메커니즘을 파악할 수 있습니다. ThisBinding을 올바르게 활용하여 코드를 작성하면 더 유연하고 동적인 프로그램을 만들 수 있습니다.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 템플릿 리터럴 쉽게 배우기 - 소개, 특징, 장점, 예제 코드

 

JavaScript forEach() 쉽게 배우기 - 소개, 구문, 특징, 예제 코드

 

JavaScript 요즘 개발 패턴 2가지 선택적 연산자, 널리시 병합 연산자