자바스크립트 This 이걸로 끝내기

This란?

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

 

객체 리터럴에서 this는 자기 자신을 가리킴

const circle = {
  radius: 5,
  getDiameter() {
    return 2 * circle.radius;
  },
};

console.log(circle.getDiameter()); // 10

 

생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킴

function Circle(radius) {
  this.radius = radius;
}

Circle.prototype.getDiameter = function () {
  return 2 * this.radius;
};

const circle2 = new Circle(5);
console.log(circle.getDiameter()); // 10

 

하지만 일반 함수에서의 this는 글로벌 객체를 가리킴

this는 자기 참조 변수 이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있기 때문. 노드에서는 global 브라우저에서는 window가 글로벌 객체임

 

function test() {
  console.log(this);
}

test();

 

정말 다양하다. 자바면 그냥 this는 인스턴스인데 자바스크립트는 왜 이 모양이지?? 이 모양이라서 계속 하게 된다;;

 

여기서 나는 많이 헷갈렸는데 중요한건 this가 어떤 함수에서 호출 됐느냐만 보면 this는 이제 어렵지 않을 것이다.

다시 이번 블로그에서 this를 끝내기로 했으니깐 한 번 더 this를 정리하면

 

다시 한번 각 호출 방식마다 this를 간략하게 알아보자

this난 함수의 호출 방식에 따라 달라지고 호출한 객체에 따라 달라진다

1. 일반 함수에서 호술시 this는 전역 객체를 가리킴

2. 메서드에서 this는 자신을 호출한 객체를 가리킴

3. 생성자 함수의 this는 생성한 인스턴스를 가리킴

 

각 호출 마다 this의 결과

 

이제 깊숙이 알아보자

 

1. 일반 함수 호출에서의 this

앞에서도 계속 말 했들이 일반 함수에서의 this는 전역 객체를 가리킨다

function foo() {
  console.log("foo's this: ", this);

  function bar() {
    console.log("bar's this: ", this);
  }

  bar();
}

foo();

위의 코드 실행 결과 this

메서드 내에서 정의한 일반 함수도 호출하면 this는 전역 객체를 나타낸다.

 

그러면 이 this를 정해주는 방법이 없을까?

있다. 묶어주는 것을 this 바인딩이라고도 하는데 바로 call, apply, bind, arrow function을 사용해 주면 된다.

이것들을 간략히 설명하면 call, apply, bind는 this를 지정해 준다고 보면 되고 arrow function은 상위 스코프의 this를 사용하도록 하게 해 준다.

 

apply를 이용한 this 바인딩

 

arrow function를 이용한 this 바인딩

이런 식으로 일반 함수에서 this와 this를 바인딩하는 것에 대해 알아봤다. 이걸로 일반 함수 부분은 끝났다.

 

2. 메서드에서의 this

메서드 내부의 this에는 메서드를 호출한 객체,.(마침표) 앞에 있는 객체가 바인딩된다. 이게 나도 강의보고 해도 느낌으로만 이해가 됐지만 아래 그림을 보고 먼가 깨닫게 됐다.

메서드로 함수를 작성하면 그 객체만의 함수가 아니라 따로 떨어져 있어서 this는 자신의 호출한 객체가 되도록 되어있다고 보면 된다.

스타크래프트 다크아칸이 마인드 컨트롤 한다고 생각하면 된다.

아래 사진은 각각 getName이라는 함수를 마인드 컨트롤해서 호출한 결과이다.

1. 첫 번째 결과로 “유승윤”이 나온 이유는 당연하게도 person객체가 호출했기 때문이다.
2. 두 번째 결과로 멍멍이가 나온 이유는 anotherPerson이 마인드 컨트롤해서 getName을 호출했기 때문이다.
3. 세 번째 결과로 undefined가 나온 이유는 함수로서 호출되고 전역 객체에는 name이라는 속성이 없기 때문이다.

3. 생성자 함수의 this

생성자 함수의 this는 간단하다. 생성자 함수가 생성할 인스턴스가 바인딩된다.

 

추가적으로 컨택스트에서 this는 아래처럼 가리킨다.

- 브라우저: window

- 노드: 모듈

- 노드 함수안: globalThis

 

헷갈렸던 this 이걸로 끝냈다.

 

참고 자료 - 모던 자바스크립트 딥 다이브, 모던 자바스크립트, 드림 코딩