자바스크립트 this

JavaScript에서의 this는 뭔가 다른 언어에서의 this 와는 다른 뉘앙스를 가지고 있다.

가끔씩 짚고 넘어가는데도 정리가 안되는 느낌이라서 한번 제대로 정리하고 가고자 한다.

JavaScript에서 this는 현재 실행 중인 함수 내부에서 현재 객체를 참조하기 위한 것이다.
this의 값은 정의할 때가 아니라 this가 포함된 함수를 호출하는 방법에 따라 결정된다.

일반적으로, this는 호출하는 객체를 참조하지만, 몇가지 경우에서 차이가 있다.

1. 함수 호출에서 this

• 함수 안의 this를 호출하면, this는 전역 객체 (브라우저에서는 window 객체)를 참조한다.
• 다만, "use strict" 모드를 사용하면, 일반 함수의 this는 undefined가 된다.

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

func();

2. 객체의 메소드 호출에서 this

• 객체의 메소드를 호출할 때, this는 해당 메소드를 호출한 객체를 참조한다.
• 주의해야 할 점은, 메소드 호출이더라도 내부 함수로 정의되어 호출된다면 역시 함수 호출이므로 해당 객체가 아니라 전역 객체를 참조한다.
• 이걸 방지하려면 this를 변수로 뽑아놓고 사용하거나 화살표 함수를 사용한다. (화살표 함수는 this를 결정할 때 함수 안에 작성된 것으로 치지 않고 lexical scope에서 결정되어 버린다.)

const obj = {
  name: "John",
  sayName() {
    console.log(this.name); // obj
    function func() {
      console.log(this); // window
    }
    func()
  }
};

3. 생성자 호출에서 this

• 함수를 new 연산자와 함께 호출하면, 생성자 함수로서 호출된다. 이 때 this는 새로 생성된 객체를 참조한다.

function Person(name) {
  this.name = name;
}

const person1 = new Person("John");
console.log(person1.name); // "John"

4. call, apply, bind에서 this

• call(), apply(), bind() 메소드를 사용해서 this의 값을 직접 지정할 수 있다.

const obj1 = {
  name: "John"
};

function sayName() {
  console.log(this.name);
}

sayName.call(obj1); // "John"
sayName.apply(obj1); // "John"

const boundFunc = sayName.bind(obj1);
boundFunc(); // "John"

정리하면,
그냥 일반적인 함수로서 호출되는 함수의 this는 전역 객체,
객체의 메소드로서 호출되는 함수의 this는 해당 객체,
new를 사용하여 생성자로 호출되는 함수의 this는 새로 생성되는 객체,
명시적으로 call, apply, bind를 사용하여 this를 지정할 수도 있다.

추가적으로 화살표 함수에서의 this는 화살표 함수를 무시하고 this가 쓰여진 곳의 상위 lexical scope에 따라 this가 결정된다.
(참고: 화살표 함수와 일반 함수의 차이)