[JS] JS의 this 호출

JS에서 this.멤버 변수(객체 내에서 선언된 변수) 또는 this.메소드(객체 내에 선언된 함수)를 호출하려고 할 때, window가 선택되거나, 의도하지 않은 객체를 지정하는 경우가 있다. 상황따라 구분하며 this가 어떤 객체를 가리키는지 알아보려고 한다.

 

1. this가 document를 가리키는 경우

1. 전역 함수에서의 this

js
function test() {
  console.log(this);
}
test(); // window (브라우저 환경)

일반적인 함수에서 this는 window를 지정한다.

2. 이벤트 핸들러에 화살표 함수로 선언

document.addEventListener('click', () => {
  console.log(this); // window
});

화살표 함수로 callback(파라미터로 전달되는 함수)를 이벤트 핸들러에 선언했을 경우, this는 해당 이벤트 객체를 가리키지 않고, window를 지정한다.

3. 객체 메서드를 화살표 함수로 선언

const obj = {
  name: '철수',
  sayHello: () => {
    console.log(this.name); // this = window
  }
};
obj.sayHello();

객체 메서드에서 화살표 함수로 선언할 경우 this는 window를 지정한다.

 

2. this가 해당 객체를 가리키는 경우.

당연히 스코프({} 사이에 있는 코드) 안에서 this를 호출해야만 메서드, 함수에서 호출할 수 있다.

1. 객체 메서드를 일반 함수 선언

const obj = {
  name: '철수',
  sayHello: function () {
    console.log(this.name); // '철수'
  }
};
obj.sayHello(); // obj가 this

객체 메서드 안에서는 this가 호출된 객체를 가리킨다.

2. 객체 메서드를 단축 함수(ES6 이후 문법) 선언

const obj = {
  name: '철수',
  sayHello() {
    console.log(this.name); // '철수'
  }
};
obj.sayHello(); // obj가 this

상당히 '객체지향 언어스러운' 메서드 선언 방법이다. ES6이후 추가되었고, this 동작에서는 일반 함수 선언과 똑같이 동작한다.

 

 

3. 일반 함수, 화살표 함수, 단축 함수 비교와 this 호출

  sayHello: function() {console.log(this.name);} // 일반 메서드
  sayHello: () => {console.log(this.name);} // 화살표 메서드
  sayHello(){console.log(this.name);} // 간결한 메서드

메서드 선언방법 세 가지와 비교하며 this 바인딩에 대해서 정리해보려 한다.

메서드 형태	설명
화살표 메서드	간결한 메서드, this가 자동으로 바인딩되지 않음, 상대적으로 가벼움, 콜백 함수로 사용하기 좋음.
일반 메서드	전통적인 선언 방식, this가 자동으로 바인딩됨, 상대적으로 무거움.
간결한 메서드	ES6이후로 추가된 선언 방식, this가 자동으로 바인딩됨, 상대적으로 가벼움.

요약하면, 화살표 메서드는 this 바인딩이 되지 않고, 일반 메서드, 간결한 메서드는 this 바인딩된다. 화살표 함수 선언 / 일반 메서드, 간결한 메서드로 묶어 생각하면 될 것 같다.

하지만 어떠한 경우에도 바인딩 불가능한 것은 아니고, bind(), call(), apply()등과 같은 함수를 이용해 명시적으로 바인딩을 추가해 함수를 호출할 수 있다.