2024.10.23 new.target, super(), bind()

장재영·2024년 10월 23일
0

new.target

  • JavaScript에서 생성자 함수나 클래스를 new 키워드로 호출할 때 사용

  • 주로 생성자 함수가 올바르게 new를 통해 호출되었는지 확인

ex1: new 없이 생성자 함수 호출 방지

function Person(name) {
  if (!new.target) {
    throw new Error('Person은 new 키워드로 호출해야 합니다.');
  }
  this.name = name;
}

const p1 = new Person('Alice'); // 정상 작동
const p2 = Person('Bob');       // Error: Person은 new 키워드로 호출해야 합니다.

ex2: 직접 인스턴스화 금지

class Animal {
  constructor() {
    if (new.target === Animal) {
      throw new Error('Animal 클래스는 직접 인스턴스화할 수 없습니다.');
    }
  }
}

class Dog extends Animal {
  constructor() {
    super(); // 반드시 부모 클래스 생성자 호출
  }
}

const a = new Animal(); // Error: Animal 클래스는 직접 인스턴스화할 수 없습니다.
const d = new Dog();    // 정상 작동

super()

  • 자식 클래스에서 부모클래스의 생성자를 호출함
  • 자식 클래스의 생성자에서 첫 줄에 호출
  • 만약 부모 클래스가 생성자를 가지고 있을 때, super()를 호출하지 않으면 오류가 발생

ex1: 부모 클래스 호출

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name}이(가) 소리를 냅니다.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 부모 클래스의 생성자를 호출하여 name을 초기화
    this.breed = breed;
  }

  speak() {
    console.log(`${this.breed}${this.name}이(가) 멍멍 짖습니다.`);
  }
}

const myDog = new Dog('바둑이', '진돗개');
myDog.speak();  // "진돗개인 바둑이이(가) 멍멍 짖습니다."

ex2: 부모 클래스 메서드 호출

class Animal {
  speak() {
    console.log('동물이 소리를 냅니다.');
  }
}

class Cat extends Animal {
  speak() {
    super.speak(); // 부모 클래스의 speak() 호출
    console.log('고양이가 야옹합니다.');
  }
}

const myCat = new Cat();
myCat.speak();
// 출력:
// 동물이 소리를 냅니다.
// 고양이가 야옹합니다.

bind()

  • this를 지정해준다고 보면 된다.
  • 자바스크립트에서는 클래스로 생성된 객체의 내장 메서드를 콜백함수로 전달하면 객체의 연결이 끊어져 this가 유실된다.
  • 그렇다고 user.ping()처럼 즉시실행하면 반환값만 가져온다
  • this를 지정해주는 bind를 사용해 연결을 유지한다 'user.ping.bind(user)'
profile
개발 하고 싶은 비버

0개의 댓글