[JavaScript] this와 this 바인딩

목차

1. this가 뭔가?

2. this 바인딩이란?

3. this는 동적으로 바인딩이 된다고 하는데, 바인딩되는 객체가 어떻게 다른가?

 

 

1. this가 뭔가? 

• 자신이 속한 객체를 가리키는 자기 참조 변수
• 대부분의 객체지향에서의 this는 클래스로 생성한 인스턴스 객체를 의미하지만, 자바스크립트에선 상황에 따라 this가 바라보는 대상이 달라진다.

 

 

 

2. this 바인딩이란? 

• 함수가 호출되는 방식에 따라 this가 동적으로 결정되는 것
• 대부분 4+1 규칙에 의해 this 바인딩이 이뤄진다.

(1) 기본 바인딩

• 아래에 해당되는 경우가 없을 때 기본적으로 적용되는 규칙. this는 전역 객체(window / global)에 바인딩됨

 

(2) 암시적 바인딩

• 객체의 메소드로서 호출될 때, 해당 함수를 호출한 객체에 this가 바인딩됨

 

(3) 명시적 바인딩

• call, apply, bind 프로토타입 메소드를 이용해 this 바인딩을 코드에서 명시하는 것

const foo = {
  a: 20,
}

function bar() {
  console.log(this.a);
}

// 1. this를 직접 foo로 바인딩하도록 명시
bar.call(foo); // 20
bar.apply(foo); // 20

// 2. 하드 바인딩 - bind 메소드의 매개변수로 받은 객체가 this로 바인딩된 '함수를 반환'함
const bound = bar.bind(foo)

bound(); // 20

 

(4) new 바인딩

• new 키워드를 통해 인스턴스 객체를 생성했을 때, this는 해당 인스턴스 객체를 참조

 

(5) 화살표 함수 (ES6)

• 화살표 함수는 앞서 말한 규칙들이 적용되지 않고, Lexical scope가 적용됨. 즉 화살표 함수를 ‘정의’하는 시점의 컨텍스트 객체가 this에 바인딩됨

 

 

 

3. this는 동적으로 바인딩 된다고 하는데, 바인딩되는 객체가 어떻게 다른가?

(1) 전역 공간에서의 this

• 브라우저에서 this는 window 전역 객체(Node.js에서 this는 global 전역 객체)

 

(2) 메소드 내부의 this

• 프로퍼티로 메소드가 할당된 객체에서, 점 표기법이나 대괄호 표기법을 통해 메소드를 호출했을 때, 메소드 내부의 this는 해당 객체를 가리킴

 

(3) 함수 내부의 this

• 일반 함수는 this가 지정되지 않아 전역 객체를 참조
• 화살표 함수는 this 바인딩 과정이 없어서 상위 스코프의 this를 그대로 활용한다.

 

(4) 콜백 함수 내부의 this

• 콜백 함수는 제어권을 다른 함수(메소드)에 넘긴 함수이기 때문에, this 또한 제어권이 넘겨진 함수 쪽에서 정해진 규칙에 따라 달라진다.
• ex) setTimeout, forEach와 같은 함수(메소드)는 this를 지정하지 않아 전역 객체를 참조 / addEventListener 메소드는 콜백 함수를 호출할 때, 자신의 this를 상속하도록 정의되어 있음

 

(5) 생성자 함수 내부의 this

• 인스턴스 객체 자신을 참조

 

 

 

참고 사이트

[JS] 알쏭달쏭 자바스크립트 this 바인딩

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