Javascript의 객체 지향 프로그래밍(2부)

지난 포스트에서 우리는 Javascript에서 oop의 기초에 대해 이야기했습니다.
이 게시물에서는 생성자 함수에 대해 자세히 설명하고 생성한 청사진에 몇 가지 메서드를 추가할 것입니다.

생성자 함수 작동 방식

우리는 우리가 만든 청사진에서 객체를 생성하기 위해 다음을 수행한다는 것을 배웠습니다.

const customer = new Customer("Alex", "[email protected]", "12", {});

이것에 대해 이상한 점은 함수 호출에 사용된 new 키워드이며 우리가 그것을 사용하는 이유를 이해하는 것이 중요합니다.
new 키워드는 3가지 작업을 수행합니다.

새 빈 개체를 만듭니다

.

새로운 빈 객체로 설정된 this 키워드로 함수를 호출합니다

.

함수가 실행 후 해당 객체를 반환하도록 합니다

.

이것은 우리가 함수 내부의 this 객체에 소품을 부착하는 이유를 설명합니다.

요약:

빈 객체로 설정된 this 키워드로 함수가 호출되고, 전달된 props를 해당 객체에 연결하고, return 문을 사용하지 않고 모든 props와 함께 해당 객체를 반환합니다.

이제 어떻게 작동하는지 이해했으므로 이름, 설명 및 이미지를 사용하여 Food 생성자 기능을 만들어 보십시오.

생성자 함수에 메서드 추가

고객 기능에 2가지 방법을 추가할 예정입니다. 하나는 설정 변경용이고 다른 하나는 식사 주문용입니다.

function Customer(name, email, password, settings, cart) {
  this.name = name;
  this.email = email;
  this.password = password;
  this.settings = settings;
  this.cart = cart;
  this.setSettings = function(newSettings) {
    this.settings = newSettings;
  }
  this.orderFood = function(food) {
    console.log(`ordering ${food}`);
  }
}

방법을 추가하는 것이 쉽다는 것을 알 수 있듯이 이제 실제로 사용하는 방법을 살펴보겠습니다.

customer.setSettings({ notifications: true });
customer.orderFood('Pizza'); // ordering Pizza

그러나 이 방법으로 메서드를 추가하는 것은 최선이 아닙니다. 인스턴스가 적다면 괜찮지만 인스턴스가 많으면 필요한 것보다 더 많은 메모리를 소비하기 때문에 문제가 될 것입니다.
다음 게시물에서는 메소드를 추가하는 더 나은 방법에 대해 논의할 것입니다.

참고: 자유롭게 정보를 추가하거나 댓글에 피드백을 제공하세요.