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

지난 게시물에서 우리는 생성자 함수가 실제로 어떻게 작동하는지 설명했고 함수에 몇 가지 메서드를 추가했습니다.
이 게시물에서는 프로토타입 개념을 사용하여 메서드를 추가하는 더 좋은 방법에 대해 이야기하겠습니다.

프로토타입이란?

프로토타입의 작동 방식을 이해하기 위해 다음과 같은 새 배열을 만들어 보겠습니다.

const list = [];

생성한 모든 목록이 내장 청사진 배열의 인스턴스인지 아직 모른다면 다음을 수행하여 이를 추가로 확인할 수 있습니다.

console.log(list instanceof Array) //true

instanceof 키워드를 사용하여 목록이 Array의 인스턴스인지 확인하고 참이라는 의미를 반환합니다.
이제 이것은 배열이므로 push 및 unshift와 같은 목록에 있는 모든 배열 메서드를 사용할 수 있습니다.

list.push(1);
list.push(2);
list.unshift(0);
console.log(list); // [0, 1, 2]

이제 여기에 질문이 있습니다. 목록에서 사용할 수 있는 모든 메서드가 목록 개체 자체 내부에 존재합니까?
내 대답은 아니오 야.
Javascript의 모든 객체에서 메소드는 해당 함수 자체에 존재하지 않지만 프로토타입에 존재하므로 프로토타입을 객체 메소드의 컨테이너 또는 홀더로 생각할 수 있습니다.
개체와 프로토타입은 모두 연결되어 있으며 Javascript가 사용하려는 메서드를 찾는 이유를 설명합니다.
여기에 또 다른 질문이 있습니다. 2개의 목록 이름과 나이를 선언하는 경우

const names = ["Alex", "Anthony", "Mark"];
const ages = [25, 27, 30];

각 목록에는 자체 프로토타입이 있습니까?
동일한 생성자 함수의 모든 객체가 동일한 프로토타입을 공유하므로 복제가 필요하지 않기 때문에 대답은 '아니오'입니다.

객체의 프로토타입에 접근하기

이제 프로토타입이 무엇이며 어떻게 작동하는지 이해하셨기를 바랍니다.
먼저 목록의 프로토타입에 액세스해 보겠습니다.

const list = [1, 2, 3];
console.log(Object.getPrototypeOf(list)); 
// [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]

//or
console.log(Array.prototype);

// [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]

그것이 우리가 자바스크립트에서 프로토타입에 접근할 수 있는 방법입니다.
이미 짐작하셨겠지만 프로토타입 자체는 객체이며 다른 객체와 마찬가지로 메서드를 더 추가할 수 있습니다.

프로토타입에 커스텀 메소드 추가

특정 메서드가 문자열이나 배열에 내장되기를 바란 적이 있습니까? 이제 프로토타입에 추가하고 사용할 수 있습니다.

예시

문자열에 포함된 단어 수를 세는 새로운 메서드를 구현해 보겠습니다.

const myName = "Alex Morgan";

String.prototype.countWords = function () {
  return this.split(" ").length;
};

console.log(myName.countWords()); // 2

거기에 String 생성자 함수에서 프로토타입을 가져오고 일반 객체처럼 메서드를 추가하면 됩니다. 간단합니다.
메서드 내부의 this 키워드는 항상 메서드를 호출하는 개체를 가리킵니다.

프로토타입을 사용하여 고객 청사진에 메서드 추가

연습으로 직접 해보고 할 수 있는지 확인하십시오.

해결책

function Customer(name, email, password, settings, cart) {
  this.name = name;
  this.email = email;
  this.password = password;
  this.settings = settings;
  this.cart = cart;
}

Customer.prototype.setSettings = function (newSettings) {
  this.settings = newSettings;
};

Customer.prototype.orderFood = function (food) {
  console.log(`ordering ${food}`);
};

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

customer.setSettings({ notifications: true });

customer.orderFood("Pizza"); // ordering Pizza

화살표 기능의 문제

화살표 함수 대신 일반 함수 스타일로 메서드를 작성했다는 점에 주목하세요. 화살표 함수를 사용하면 작동하지 않기 때문입니다. 그 이유는 화살표 함수에 this 키워드가 없기 때문입니다. 메소드를 호출한 객체를 가리키므로 메소드에서 화살표 기능을 전혀 사용하지 마십시오.

빠른 단어

이 게시물을 읽어주셔서 감사합니다. 이제 프로토타입을 잘 이해하셨기를 바랍니다.
이 게시물이 도움이 되고 유익한지 댓글로 알려주시고 언제든지 피드백을 제공해 주세요.