[JS] this

this가 필요한 이유

객체 지향 프로그래밍은 프로퍼티를 참조하고 변경하기 위해서는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 아래 예시를 통해 살펴보자.

참조 1. 객체 리터럴의 직접 참조.
대체로 일반적이 방법이 아니고 바람직한 방법이 아니다.

참조 2 & 3. 생성자 함수
함수 몸체에 선언한 프로퍼티가 아직 생성할 인스턴스를 알 수 없다.
new 연산자 생성자 함수를 호출해야 인스턴스를 생성할 수 있다. 그러므로 인스턴스 생성 전에 생성자 함수를 정의해야한다.

// 객체
const cart = {
	total: 0,
  	addTotal(num){
      	// 참조 1
    	return cart.total += num; 
    }  
}

console.log(cart.addTotal(10)); // 10

// 생성자 함수
function Cart(num) {
  // 참조 2
  ????.total = num;
}

Cart.prototype.addTotal = function (num) {
  return (????.total += num);
};

// 참조 3
const cart2 = new Cart(5);

🧐 객체 리터럴에서 자신이 속한 객체를 가리키는 식별자, 생성자 함수로 인스턴스를 생성할 경우 생성한 인스턴스를 가리키는 특수한 식별자가 필요함을 알 수 있다.

this란?

• 자신이 속한 객체나 생성한 인스턴스를 가리키는 자기 참조 변수. (self-referencing variable)
• 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달.
• this 바인딩은 함수 호출 방식에 의해 동적으로 결정.
  🚨 다른 클래스 기반 언어는 클래스가 생성하는 인스턴스를 항상 가리킴.
• this 바인딩 : 식별자와 값을 연결하는 과정.
• 전역에서 this는 window.
• strict mode일 때 일 반 내부함수 내에서는 undefined.

// 객체 리터럴
const cart = {
	total: 0,
  	list: [],
  	addItem(newItem){
      	// this로 객체 내부의 프로퍼티 접근.
    	this.list.push(newItem);
      	this.total += newItem.price; 
    },
  	getTotal(){
    	return this.total;
    }  
}

cart.addItem({ name: 'apple', price: 1000 });
cart.addItem({ name: 'banana', price: 2500 });
console.log(cart.getTotal()); // 3500

함수 호출 방식에 따른 this

함수 호출 방식	this 바인딩
일반 함수	window
화살표 함수	상위 스코프의 this
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성한 인스턴스
Function.prototype.apply/call/bind 메서드에 의한 간접 호출	인수에 의해 결정

위의 내용 중 세부적으로 살펴볼 항목이 있는데 메서드 내에서 콜백 함수를 호출할 때이다. 콜백 함수가 일반 함수이고 내부의 this를 호출한다면 이는 위의 표와 같이 전역을 가리키게 된다.

• 문제점 : 메서드의 this와 콜백 함수 내부의 this가 일치하지 않으면 중첩 함수 또는 콜백 함수가 헬퍼 함수로 동작하기 어렵다.
• 해결 방법 : apply / call / bind 함수로 this를 바인딩해준다.

함수	특징
apply call	본질적인 기능은 함수 호출. 함수를 호출하면서 첫번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩.
bind	함수를 호출하지 않는다. this 바인딩이 교체된 함수를 새롭게 생성해 반환.

🍑 오늘의 공부 일기

this는 항상 어려운 부분이라고 생각한다. this가 호출 시점에 동적으로 결정되기 때문인데 이론을 알고도 객체 내에서 this를 사용하다보면 예상치 못하는 문제점이 생기기고 머릿속이 복잡해진다. 그렇기에 개념적으로 정리를 하면서 항상 복습을 하며 this에 대해 정확히 알아가도록 하자.

참고 자료
이웅모, 모던 자바스크립트 Deep Dive, 위키북스
https://joontae-kim.github.io/2020/11/02/js-oop-2/
https://namu.wiki/w/%EA%B0%9D%EC%B2%B4%20%EC%A7%80%ED%96%A5%20%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D