[자바스크립트] This, 바인딩

This

JavaScript에서 this는 매우 중요한 개념이다. 그렇지만 이해하기 어려운 부분 중 하나로 여겨진다. this는 실행 컨텍스트에 따라 달라지며, 함수가 호출되는 방식에 따라 참조하는 객체가 달라진다. 이 포스트에서는 this와 관련된 바인딩에 대해 알아보겠다.

This란

this 키워드는 현재 실행 컨텍스트에서 특별한 객체를 참조한다. 일반적으로, 함수 내에서 this는 함수 호출에 의해 결정된다.

• 전역 컨텍스트에서 this는 전역 객체를 참조한다.
• 객체의 메서드에서 this는 해당 객체를 참조한다.
• 생성자 함수에서 this는 새로 생성된 객체를 참조한다.
• strict mode에서 this는 undefined가 될 수 있다.

예시:

function globalContext() {
  console.log(this); // 전역 객체 (브라우저에서는 window)
}

var obj = {
  methodContext: function() {
    console.log(this); // obj
  },
};

globalContext();
obj.methodContext();

바인딩

바인딩은 this가 특정 객체에 연결되도록 하는 과정이다. JavaScript에서는 여러 방법으로 this의 바인딩을 변경할 수 있다.

1. 명시적 바인딩: call, apply, bind 메서드를 사용해 this를 명시적으로 바인딩할 수 있다.

   예시:

   function showName() {
     console.log(this.name);
   }
   
   var person = { name: '홍길동' };
   showName.call(person); // '홍길동'
   

2. 암시적 바인딩: 객체의 메서드로 호출되는 함수에서 this는 해당 객체로 암시적으로 바인딩된다.

   예시:

   var person = {
     name: '이순신',
     sayName: function() {
       console.log(this.name);
     },
   };
   
   person.sayName(); // '이순신'
   

3. new 바인딩: new 키워드를 사용해 생성자 함수를 호출하면 this는 새로 생성된 객체를 참조한다.

   예시:

   function Person(name) {
     this.name = name;
   }
   
   var person = new Person('세종');
   console.log(person.name); // '세종'
   

4. 화살표 함수: 화살표 함수에서의 this는 상위 스코프의 this를 물려받는다.

   • this 바인딩 예외 적용
   • 이미 바인딩 된 것은 다시 바인딩 불가
   • ⇒암시적,명시적이던 재바인딩 불가

   예시:

   var obj = {
     name: '유관순',
     sayName: () => {
       console.log(this.name);
     },
   };
   
   obj.sayName(); // undefined (화살표 함수에서 this가 상위 스코프의 this를 참조)
   

결론

this는 JavaScript에서 복잡한 개념 중 하나로, 함수가 호출되는 방식에 따라 다르게 작동한다. 바인딩을 이해하면 이러한 복잡성을 제어하고 코드를 더 효과적으로 작성할 수 있다.