JavaScript 객체 지향 프로그래밍에서 메서드 코드의 컨텍스트 손실

클래스 메서드의 원본 코드를 사용할 때 컨텍스트가 손실될 수 있습니다. 예제를 통해 살펴보겠습니다. 다음과 같은 클래스가 있다고 가정해 봅시다:

class User {
	#name;
	
	constructor(name) {
		this.#name = name;
	}
	getName() {
		return this.#name;
	}
}

이 클래스의 객체를 생성해 봅시다:

let user = new User('john');

메서드 코드를 변수에 저장해 봅시다:

let func = user.getName;

메서드를 변수에 저장하는 순간 컨텍스트가 손실되었습니다. 이제 메서드 코드 내부의 this는 더 이상 클래스 객체를 가리키지 않습니다. 함수를 호출하여 확인해 봅시다:

console.log(func()); // 오류

이 문제를 해결하기 위해 함수에 컨텍스트를 바인딩할 수 있습니다, 예를 들어 bind를 통해:

func = func.bind(user);
console.log(func()); // 작동