[TIL] 클래스

1. 오늘의 질문

클래스에서 메소드를 정의하는 두 가지 방식이 존재합니다. 하나는 메소드를 직접 정의하는 방식, 다른 하나는 this 키워드를 사용해 메소드를 정의하는 방식입니다. 이 두 방식이 어떤 차이점을 가지고 있는지 생각나는 대로 말씀해주세요.

2. 직접 정의

class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() { // 직접 정의
    console.log(`안녕하세요, 제 이름은 ${this.name}입니다.`);
  }
}

3. this 키워드 사용

this.methodName = function() { ... }

4. 비교

1. 문법적 차이:

• 직접 정의: methodName() { ... }
• this 키워드 사용: this.methodName = function() { ... }

2. 프로토타입 체인:

• 직접 정의: 프로토타입에 추가됨
• this 키워드: 인스턴스에 직접 추가됨

3. 메모리 사용:

• 직접 정의: 모든 인스턴스가 같은 메소드를 공유
• this 키워드: 각 인스턴스마다 별도의 메소드 복사본 생성

4. 오버라이딩:

• 직접 정의: 프로토타입 메소드 오버라이딩 가능
• this 키워드: 인스턴스 수준에서 메소드 재정의

5. 초기화 시점:

• 직접 정의: 클래스 정의 시 초기화
• this 키워드: 인스턴스 생성 시 초기화

6. 'this' 바인딩:

• 직접 정의 방식: 동적 바인딩을 사용
  'this'의 값은 메소드가 호출되는 방식에 따라 결정되므로
  메소드가 객체의 메소드로 호출되면 'this'는 해당 객체를 가리킵니다.
  하지만 메소드가 독립적으로 호출되거나 콜백으로 전달될 때 'this'가 예상과 다르게 바인딩될 수 있습니다.
  예시)

class Example {
  method() {
    console.log(this);
  }
}

const obj = new Example();
obj.method(); // this는 obj를 가리킴
const func = obj.method;
func(); // this는 undefined 또는 전역 객체를 가리킴 (strict mode에 따라 다름)