자바스크립트에서의 this는 Java의 this 정의와 다르다.

JAVA

this: 자신을 가리키는 참조 변수

자바스크립트에서 this는 다음과 같이 동작한다.

JavaScript

this: 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라짐.

자바스크립트의 함수 호출 방식은 모두 4가지이다.

---

1. (일반)함수 호출
2. 메서드 호출
3. 생성자 함수 호출(객체 생성 함수)
4. apply/call/bind 호출

---

📕 함수 호출

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

foo(); // window

일반 함수는 다음과 같이 가장 간단한 방법으로 호출할 수 있으며,
이때, this는 전역 객체를 가리키게 된다.

함수 호출

this: 전역 객체에 바인딩된다.

• 내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩한다.

📙 메소드 호출

var person = {
  name: 'Lee',
  printName: function() {
    console.log(this.name);
  }
}

person.printName() // "jamong"

메소드: 객체의 값이 함수로 이루어 진 경우

메소드 호출

this: 해당 메소드를 소유한 객체에 바인딩된다.

📗 생성자 함수 호출

var instance = new foo(); // instance

생성자 함수: 객체를 생성하는 역할을 한다
생성자 함수의 동작 과정은 3가지로 요약할 수 있다.
1. 빈 객체 생성 및 this 바인딩:
생성자 함수가 실행되기 전, 빈 객체가 생성되고 이는 this로 바인딩된다.
2. this를 통한 프로퍼티 생성
3. 생성된 객체 반환

그래서 생성자 함수에서 this는 어떤 역할을 하나요? 하고 궁금할 수도 있는데, 한줄로 짧게 요약이 가능하다.

생성자 함수 호출

this: 함수의 인자로 전달받은 값을 객체의 속성에 할당하기 위해 this 키워드를 사용

📘 apply/call/bind 호출

apply, call, bind 메소드를 통해 this를 특정 객체에 명시적으로 바인딩이 가능하다.

apply,call: 함수를 호출
=> 대표적으로 유사 배열 객체에 배열 배소드를 사용하는 경우에 활용
bind: this로 사용할 객체만 전달
=> 메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this가 불일치한는 문제를 해결하기 위해 사용

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

Person.apply(foo, ['name']);
console.log(foo); // { name: 'name' }

코드에서, apply를 통해 생성자 함수 Person 내부의 this에 객체 foo를 바인딩시켰다.

명시적 this 바인딩

this: 특정 객체에 명시적으로 바인딩됨

아래와 같은 콜백 함수 상황에서 bind는 유용하게 사용된다

const person = {
  name: 'Jamong',
  foo(callback){
    setTimeout(callback.bind(this),100);
  }
};
person.foo(function(){
  console.log(`my name is ${this.name}`);
});

여기서 bind를 사용하지 않으면, this는 person의 객체가 아닌, 일반함수에서 호출되어 전역 객체를 가리키게 된다.

정리

this 객체에 대해서 정리하자면 내용은 다음과 같다.

• 일반 함수에서의 this: window(전역 객체)
  내부 함수(일반 함수, 메소드, 콜백함수)는 모두 전역객체 바인딩

• 메소드에서 this: 메소드를 소유한 객체

• 생성자 함수에서 this는 객체 속성 할당을 위해 사용

• 명시적 this: 특정 객체에 바인딩이 가능함.
  (apply, bind, call)

this는 실행 문맥에 따라 결정된다.

이를 응용하면, 이벤트 함수가 호출되면 this는 해당 이벤트 객체에 할당되겠구나 등을 쉽게 파악할 수 있다.