this

자바스크립트를 배우면서 가장 헷갈렸던 부분이 this 였다.

자바에서는 단순하게 자기 자신을 가리키지만 자바스크립트에서는 여러 상황마다 다른 결과를 보여준다.

몇 년 동안 사용하다보니 익숙해지긴 했지만 확실하게 포스팅으로 정리하는게 낫겠다는 생각이 들었다.

 

1. 일반적인 호출

일반적인 상황. 즉, 그냥 호출하는 경우 기본적으로 this는 전역 객체를 가리킨다.

단, strict 모드에서는 undefined

function foo() {
  console.log(this); // window
}
foo();

 

2. 내부 함수의 호출

1번과 마찬가지로 this는 전역 객체를 가리킨다.

function foo() {
  console.log(this); // window
  function bar() {
    console.log(this); // window
  }
  bar();
}
foo();

 

3. 객체의 메소드로 호출

객체의 메소드로 호출하면 함수는 그 객체를 가리키게 된다.

const tmp = {
  ftn: function() {
    console.log(this); // tmp
  },
};

tmp.ftn();

하지만 이 경우에도 ftn 내부에 다른 함수가 존재하며, 그 함수를 호출한다면 그 함수의 this는 전역 객체를 가리키게 된다.

 

4. new 키워드로 호출 (생성자 함수)

생성자 함수로 호출하는 경우 함수의 코드가 실행되기 전 this는 빈 객체가 되며, 이후 코드가 실행되고 그 결과가 this에 할당된  이후 반환된다.

const Obj = function() {
  this.count = 0;
}

const obj = new Obj();
console.log(obj.count); // 0

 

5. 화살표 함수

화살표 함수에서는 주변 스코프의 this를 따르게 된다.

const obj = {
  ftn: function() {
    console.log(this); // obj
    
    (function(){ console.log(this)})(); // window
    (() => console.log(this))(); // obj)
  }
}

 

6. call, apply, bind

call, apply, bind로 함수를 호출 또는 생성하는 경우 this는 첫 번째로 전달받은 객체가 된다.

const call = {
  ftn: function() {
    console.log(this); // obj
    
    function abc() {
      return this;
    }
    
    console.log(abc()); // this
    console.log(abc.call(this)); // obj
  }
}

call.ftn();