👩🏻‍💻 자바스크립트 면접 단골 개념들 4 (This)

[leemember]

This (이것)

• JS에서 this는 다른 언어들과 다르게 사용된다고 한다. 문맥에 따라 이것이 가리키는 것이 달라진다.
• this는 내가 앞으로 만들어질 인스턴스나, 객체 자기 자신을 가리키는 용도로 사용됐다. 특정한 객체와 this를 묶어놓은 것은 this 바인딩이라고 칭한다. 자바나 C에서의 this는 하나의 인스턴스에 고정되지만 자바스크립트 또는 타입스크립트는 런타임 상에서 this 바인딩이 동적으로 결정된다.

---

글로벌 컨텍스트에서의 this란?

• 브라우저 : this = window 다.
• 노드 : 모듈을 가리킵니다. 콘솔로그에 노드의 this를 출력하면 텅텅 빈 객체가 출력이 된다.
  globalThis를 출력하면 노드에서 사용되는 전역 객체들이 출력된다.

ex) setTimeout, setInterver 같은 것들. globalThis는 생략이 가능하다.

브라우저에서의 this는 window다.

---

함수 내부에서의 this

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

use stric = 엄격모드를 사용하게 될 경우, undefined가 뜬다.

느슨한 모드에서는 globalThis를 가리키는 것을 확인해볼 수 있다.

---

생성자 함수 또는 클래스에서의 this, 앞으로 생성될 인스턴스 자체를 가리킴

// 이 생성자 함수 안에서
function Cat(name) {
  this.name = name;
    // 앞으로 만들어질 오브젝트 그 자체를 가리킨다고 보면 된다.
  this.printName = function() {
  console.log(this.name);
 }
}

const cat1 = new Cat('냐옹');
const cat2 = new Cat('뫄옹');
cat1.printName();
cat2.printName();

[leemember]

동적 바인딩

• 현재 this는 누구인지 모른다.

자바, C#, C++ 대부분의 객체지향 프로그래밍 언어에서는 this는 항상 자신의 인스턴스 자체를 가리킨다. 정적으로 인스턴스가 만들어지는 시점에 this가 결정된다는 뜻이다. 하지만 자바스크립트에서는 누가 호출하냐에 따라 this가 달라진다. 즉, this는 호출하는 사람(=caller)에 의해 동적으로 결정이 된다.

[leemember]

정적 바인딩

this라는 함수가 계속 동적으로 변경되기 때문에 이걸 정적으로 꽁꽁 얼려버리는 방법이 있다.

1. bind 라는 함수를 이용해서 수동적으로 바인딩 해준다.

this.printName = this.printName.bind(this)

조금 더 간편하게 하는 방식이 있다.
함수 화살표 방식을 사용하면 된다.

2. arrow 함수 사용

• arrow 함수는 렉시컬 환경에서 this를 기억한다.

this.printName = () => {
 consolel.og('안녕 ${this.name}`);
}

이런 식으로 사용할 수가 있다.

---

화살표 함수 특징

1. 문법이 깔끔하다
2. 생성자 함수로 사용이 불가능하다 (무거운 프로토타입을 만들지말자)
3. 함수 자체 arguments
4. this에 대한 바인딩이 정적으로 결정된다

• 함수에서 제일 근접한 상위 스코프의 this에 정적으로 바인딩된다.