JS의 객체 지향 프로그래밍

객체 지향 프로그래밍에서는 데이터와 메서드를 클래스라는 단일 엔터티로 그룹화하고 객체라는 클래스의 다른 인스턴스를 만듭니다. 이러한 개체는 다른 데이터를 갖습니다. 상속은 또 다른 OOP 기능으로 부모 및 자식 클래스를 생성하여 코드를 재사용할 수 있습니다. 부모 클래스에는 모든 자식에게 공통적인 코드가 있습니다. 자녀는 부모의 전문입니다.

자바스크립트의 상속 모델

JavaScript는 프로토타입 기반 상속 모델을 따릅니다. 프로토타입은 JS 엔진이 함수에 추가할 속성입니다. 이 프로토타입 객체 인턴은 기본적으로 생성자 속성을 가지고 있습니다. 프로토타입에서 사용 가능한 속성을 확인하려면 Object.getOwnPropertyNames(functionName.prototype)를 사용할 수 있습니다.
프로토타입에 어떤 속성이 있는지 확인합니다.

클래스 및 해당 인스턴스 만들기

먼저 JS에서 특정 클래스 객체를 생성하는 방법을 살펴보겠습니다.
객체를 생성하려면 생성자 함수를 사용해야 합니다. 생성자 함수를 사용하여 특정 유형의 객체를 가져올 수 있습니다. new Array(), new Date()에 사용된 new 키워드를 이미 본 적이 있을 것입니다.
다음 경우에는 Transport 유형에 대한 생성자 함수를 생성합니다. 규칙은 클래스의 이름을 지정하는 것처럼 생성자 함수의 이름을 지정하는 것입니다.

function Transport(mode, travelSpeed, ticketCost) {
  this.mode = mode
  this.travelSpeed = travelSpeed
  this.ticketCost = ticketCost
}

let bus = new Transport('Road', 'Slow', 'Cheap')
console.log(bus)
// Output: { mode: "Road", travelSpeed: "Slow", ticketCost: "Cheap" }

그래서 여기에서 Transport 유형의 객체를 생성하는 생성자 함수를 만들었습니다.

'instance of' 연산자를 사용하여 객체가 클래스의 인스턴스인지 확인하려면.

bus instanceof Transport
// Output: true

또한 protype 개체의 속성을 확인할 수도 있습니다.

console.log(Object.getOwnPropertyNames(Transport.prototype))
// Output: Array [ "constructor" ]

클래스에 메소드 추가

클래스로 작업할 때 프로토타입에서 메서드를 사용해야 합니다. 이렇게 하면 프로토타입에서 메서드를 변경할 수 있고 모든 인스턴스에 반영할 수 있기 때문입니다.

Transport.prototype.showInfo = function() {
  console.log(this.mode, this.travelSpeed, this.ticketCost)
}
bus.showInfo()
// Output: Road Slow Cheap

이제 Transport의 prototype 속성을 확인하면 방금 추가한 메서드를 볼 수 있습니다.

console.log(Object.getOwnPropertyNames(Transport.prototype))
// Output: Array [ "constructor", "showInfo" ]

자식 클래스 만들기

이제 이 객체는 Transport 클래스에 공통적이지 않은 속성을 가질 것이기 때문에 Bus에 대해 별도의 유형의 클래스를 생성해 보겠습니다.

function Bus(mode, travelSpeed, ticketCost, busType) {
  Transport.call(this, mode, travelSpeed, ticketCost)
  this.busType = busType
}

let interCityBus = new Bus('Road', 'Slow', 'Cheap', 'Sleeper')
console.log(interCityBus)
// Output: { mode: "Road", travelSpeed: "Slow", ticketCost: "Cheap", busType: "Sleeper" }

위의 예에서는 Bus 생성자 함수 내에서 Transport 생성자 함수를 호출하여 자식-부모 관계를 만들었습니다. Transport.call()은 super() 연산자 호출과 같습니다.

여기서 상속이 완전히 이루어지지는 않았지만 bus 클래스의 protot 속성을 확인해보자.

console.log(Object.getOwnPropertyNames(Bus.prototype))
// Output:  Array [ "constructor" ]

여기에는 부모에 정의된 메서드가 없습니다. 부모로부터 속성을 얻으려면
자식 프로토타입과 부모 프로토타입을 병합해야 하는 경우 this MDN post 및 이 게시물 Digital Ocean communiy 에 매우 친절하고 자세하게 설명되어 있습니다. JavaScript의 프로토타입에 대해 자세히 알아보려면 이 게시물( JavaScript Prototype in Plain Language , Prototypes in JavaScript )을 읽으십시오. 또한 자식 클래스의 프로토타입에서 값을 할당하여 자식의 메서드를 재정의할 수 있습니다.

수업으로 작업하는 더 쉬운 방법

프로토타입 작업은 다소 지루하고 혼란스러울 수 있습니다. 상속을 처리하는 또 다른 방법이 있습니다. ES 2105는 클래스를 생성하기 위해 새로운 구문을 도입했습니다. 내부 상속 메커니즘은 동일하게 유지됩니다. 위의 예를 클래스 기반 솔루션으로 변환해 보겠습니다.

class Transport {
  constructor(mode, travelSpeed, ticketCost) {
    this.mode = mode
    this.travelSpeed = travelSpeed
    this.ticketCost = ticketCost
  }

  showInfo() {
    console.log(this.mode, this.travelSpeed, this.ticketCost)
  }
}

class Bus extends Transport {
  constructor(mode, travelSpeed, ticketCost, busType) {
    super(mode, travelSpeed, ticketCost)
    this.busType = busType
  }
}

let cityBus = new Bus('Road', 'Slow', 'Cheap', 'Seating')
cityBus.showInfo()

거기다가 깔끔하고 깨끗해보이지 않나요?
상위 클래스의 생성자에 값을 전달하기 위해 super() 연산자를 사용했습니다. 또한 이 방법을 사용하면 JavaScript에서 처리하므로 부모 클래스와 기본 클래스의 프로토타입을 병합할 필요가 없습니다. showInfo() 메서드의 동작을 변경하려면 자식 클래스에서 간단히 재정의하면 됩니다.

class Bus extends Transport {
  constructor(mode, travelSpeed, ticketCost, busType) {
    super(mode, travelSpeed, ticketCost)
    this.busType = busType
  }

  showInfo() {
    console.log(this.mode, this.travelSpeed, this.ticketCost, this.busType)
  }
}

let cityBus = new Bus('Road', 'Slow', 'Cheap', 'Seating')
cityBus.showInfo()

항상 생성자 내부의 모든 속성을 설정할 필요는 없습니다. 때때로 특정 값만 설정하고 읽고 싶을 수도 있습니다. getter 및 setter에 대해 읽을 수 있습니다here.

이 게시물이 마음에 들면 공유하고 내 게시물을 계속 업데이트하려면 저를 팔로우하세요. :)

Unsplash의 Hal Gatewood 표지 사진