JS | this(2) : 일반함수와 화살표 함수의 this

Yeseul·2021년 3월 27일

ES6 JavaScript TIL

JavaScript

목록 보기

4/10

1. 일반 함수의 this

자바스크립트는 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다.

함수 호출 방식
메소드 호출 방식
생성자 함수 호출 방식

1-1. 함수 호출 방식 : this -> 전역객체

기본적으로 this는 전역객체에 바인딩된다. 이는 내부함수, 콜백함수에서도 마찬가지이다.
브라우저 환경에서 전역객체는 window, Node.js 환경에서는 global이다.

var value = 1;

var obj = {
  value: 100,
  foo: function() {
    console.log("foo's this: ",  this);  // obj
    console.log("foo's this.value: ",  this.value); // 100
    function bar() {
      console.log("bar's this: ",  this); // window
      console.log("bar's this.value: ", this.value); // 1
    }
    bar();
  }
};

obj.foo();

var that = this

메소드 내부함수에서 this가 전역객체에 바인딩되는 문제는 메소드에서 this를 (비전역) 변수에 할당하여 해결할 수 있다.

var obj = {
  value: 100,
  foo: function() {
    var that = this;
    console.log("foo's this: ",  that);  // obj
    console.log("foo's this.value: ",  that.value); // 100
    function bar() {
      console.log("bar's this: ",  that); // obj
      console.log("bar's this.value: ", that.value); // 100
    }
    bar();
  }
};

obj.foo();

1-2. 메소드 호출 방식 : this -> obj

함수를 객체의 메소드로 호출할 경우 this는 메소드를 호츨한 객체에 바인딩된다.

1-3. 생성자 함수 호출 : this -> instance

생성자 함수와 일반 함수의 형식적 차이는 존재하지 않지만 new 연산자로 호출되는 생성자 함수는 인스턴스 객체를 생성하는 역할을 한다. 이때 생성자 함수 내의 this는 새로 생성된 객체(인스턴스)에 바인딩 된다.

참고로 생성자 함수는 일단 빈 객체를 만들고 함수 안에서 this를 통해 빈 객체에 새로운 프로퍼티를 추가하는 방식으로 동작한다.

2. 이벤트 핸들러 함수 내부의 this

2-1. 인라인 이벤트 핸들러 방식 : this -> 전역객체

인라인 이벤트 핸들러 방식의 경우, 이벤트 핸들러는 일반 함수로 호출이 되므로 이때 this는 전역객체에 바인딩된다.

<button onclick='foo()'></button>

<script>
function foo() {
    console.log(this)   // window
}
</script>

2-2. 이벤트 핸들러 프로퍼티 방식 : this -> event.currentTarget

메소드로 호출되는 프로퍼티 방식의 이벤트 핸들러 내부의 this는 이벤트에 바인딩된 요소를 가리킨다. 이것은 이벤트 객체의 currentTarget 프로퍼티와 같다.

const btn = document.getElementByTagName('button');

btn.onclick = function(event) {
    console.log(this);  // <button>
    console.log(event.currentTarget)    // <button>
    console.log(this === event.currentTarget)   // true
}