Js - this에 대하여

1. 일반 함수에서 호출하는 this
2. 메소드에서 호출하는 this
3. 생성자 함수에서의 this
4. 콜백 함수에서의 this
5. 화살표 함수에서의 this

 

우선 간단히 중요한점을 요약 하자면

 

전역에서 사용한 this

• 전역 객체에서 사용한 this는 항상 window이다.
• 전역 객체란 전역 범위에 항상 존재하는 객체를 의미한다.
• 자바스크립트 런타임에서 모든 변수 및 함수는 window라는 전역 객체의 프로퍼티와 메소드이다.

 

함수 내부에서 사용한 this

• 함수는 전역에 선언된 일반 함수와 객체 안에 메소드로 크게 구분할 수 있다.
• function 키워드로 선언된 함수는 일반 함수이다.
• 객체안에 선언된 함수는 전역에 선언된 함수와 비교하기 위해 메소드라고 한다.
• 전역에 선언된 함수와 function 키워드로 선언된 함수는 일반 함수이며, 결국 window(전역) 객체의 메소드이다.
• 일반적인 경우 함수와 메소드에서 호출하는 this의 값은 함수를 호출하는 방법에 의해 달라진다.
• 엄격 모드에서 일반 함수 내부에 있는 this는 undefinded가 바인딩 된다.
• 콜백함수에서의 this는 콜백함수가 일반 함수이면 window를 바라본다. 화살표 함수이면 상의 스코프의 this를 가리킨다.
• call, apply, bind 메소드를 통해 this값을 바인딩 시킬 수 있다.
• function 키워드로 생성한 일반함수와 화살표 함수의 큰 차이점은 this이다.
• 화살표 함수 안에있는 this는 항상 상위 스코프의 this를 가리킨다.
• 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

 

 

1. 일반 함수에서 호출하는 this

위에서 적어논듯이 일반적인 경우 this의 값은 호출하는 방법에 의해 달라진다고 하였다. sik()함수를 window 전역 객체에서 호출하였기 때문에 this의 값은 window이다.

function sik () {
  return this;
}
sik(); // window 객체 출력 window.sik()으로 호출한것과 같다.
console.log(sik() === window.sik()) // true

 

 

2. 메소드에서 호출하는 this

이 경우도 this의 값은 호출하는 방법에 의해 달라지기 때문에 sik객체이다. showContent() 함수를 sik객체를 통해 호출하였기 때문에 this의 값은 window이다.

const sik = {
  content: 'Hello World!',
  showContent() {
    console.log(this.title);
  }
};
sik.showContent(); // 'Hello World!'

 

 

3. 생성자 함수에서의 this

new 연산자를 사용하여 생성자 함수 방식으로 인스턴스를 생성한 경우에는 window 객체에서 사용하더라도 생성된 객체를 바라본다.

function Sik() {
  this.content = 'Hello World!';
}
// new 연산자를 이용해서 새로운 객체를 얻는다.
const ms = new Sik();
ms // Sik {content: 'Hello World!'}

console.log(ms.content) // Hello World

 

 

4. 콜백 함수에서의 this

아래 콜백함수에서 호출하는 this의 값은 window이다. 왜냐하면 콜백함수는 일반함수이기 때문이다.

const sik = {
  content: 'Hello World!',
  numbers: [1, 2, 3, 4],
  showNumber() {
    this.numbers.forEach(function(number) {
      console.log(number);
      console.log(this); // window
    });
  }
}
sik.showNumber();
// 1
// window 객체 출력
// 2
// window 객체 출력
// 3
// window 객체 출력
// 4
// window 객체 출력

 

 

5. 화살표 함수에서의 this

function 키워드로 생성한 일반함수와 화살표 함수의 큰 차이점은 this이다. 화살표 함수 안에있는 this는 항상 상위 스코프의 this를 가리킨다. 일반 함수는 함수를 호추할 때 어떻게 호출되느냐에 따라 this가 달라지지만 화살표 함수는 함수를 선언할 때 this에 바인딩 할 객체가 결정된다. 또 중요한것은 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다는 점이다.

const sik = {
  content: 'Hello World!',
  numbers: [1, 2, 3, 4],
  showNumber() {
    this.numbers.forEach((number) => {
      console.log(number);
      console.log(this); // sik
    });
  }
}
sik.showNumber();
// 1
// sik 객체 출력
// 2
// sik 객체 출력
// 3
// sik 객체 출력
// 4
// sik 객체 출력