[Javascript] this란 무엇인가

Javascript에서 쓰이는 this란 무엇일까

Javascript에서의 this와 다른 언어에서 쓰이는 this는 의미가 다르다. 다른 언어에서 쓰이는 this는 해당 코드를 실행하는 클래스의 인스턴스를 의미한다. (지시어의 의미) Javascript는 쓰임이 다르고 종류도 다양하다.

 

기본 바인딩 (Default Binding)

바인딩이란 데이터와 변수값을 묶는 것을 말하며, 기본 바인딩은 다른 바인딩에 해당하는 것이 없을 경우에 적용된다.

기본 바인딩의 경우 this는 전역 객체에 바인딩된다.

function foo() {
  const a = 10;
  console.log(this.a);
}

foo(); // undefined

다음 코드를 살펴보면 foo()함수를 실행시키면, 콘솔창에 10이 아닌 undefined라고 찍혀나오는 것을 볼 수 있다. 이는 this가 전역 객체에 바인딩되었기 때문이다.

전역개체에 a라는 변수가 있는 경우에만 a라는 값을 출력시킨다.

 

암시적 바인딩 (Implict Binding)

암시적 바인딩이란, 함수가 객체의 메서드로 호출되는 상황에서 this가 바인딩되는 것을 의미한다.

이때 this는 해당 함수를 호출한 객체, 즉 컨텍스트 개체에 바인딩된다.

const foo = {
  a: 20,
  bar: function () {
    console.log(this.a);
  }
}

foo.bar(); // 20

 

암시적 바인딩의 경우, foo.bar() 함수를 다른 함수의 매개변수로 사용하지 않도록 조심해야한다.

매개변수로 foo.bar() 함수를 사용할경우, 해당 함수가 실행되지 않고 undefined로 정의된다. 이것은 foo.bar() 함수는 foo객체의 컨텍스트에서 실행되는게 아니기 때문에, 암시적 바인딩으로 적용되는 것이 아니라 기본 바인딩으로 전역되기 때문이다.

 

명시적 바인딩 (Explict Binding)

자바스크립트의 모든 Function은 call(), bind(), apply()라는 프로토타입 메서드를 가지고 있다. 이 3가지 메서드 중 하나를 호출함으로써 this 바인딩을 코드에서 명시하는 것을 명시적 바인딩이라고 한다. 이때 this는 내가 명시한 객체에 바인딩된다.

 

call(), apply()

const foo = {
  a: 20,
}

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

bar.call(foo); // 20
bar.apply(foo); // 20

bar 함수의 프로토타입 메서드 call과 apply에 foo라는 객체를 넘겨주면서, bar 함수를 실행할때의 this 컨텍스트를 foo로 직접 바인딩해주었다. 

 

bind()

const foo = {
  a: 20,
}

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

const bound = bar.bind(foo)

bound(); // 20

bind 메서드는 매개변수로 받은 전달받은 오브젝트로(foo) this가 바인딩된 것을 의미한다. 이것을 하드 바인딩이라고 하며, 하드 바인딩이 된 함수는 이후에 호출될 때마다 정해진 this 바인딩을 가지고 호출한다. 

 

화살표 함수

화살표 함수는 ES6에 추가되었다. 화살표 함수는 this를 바인딩할때, 앞서 설명한 규칙들이 적용되지 않고 this에 어휘적 스코프 (Lexical scope)가 적용된다. 즉, 화살표 함수를 정의하는 시점의 컨텍스트 객체가 this에 바인딩된다.

const foo = {
  a: 20,
  bar: function () {
    setTimeout(() => {
      console.log(this.a);
    }, 1);
  }
}

foo.bar(); // 20

setTimeout의 콜백인 화살표 함수의 선언시에는 this는 foo의 객체를 가르키고 있기 때문에(렉시컬 스코프), 콜백이 실행될 때는 this는 foo를 가르키게 된다.  

 

참고

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