[자바스크립트]클래스(class) [1] 객체지향 프로그래밍의 상속방법(es5/class)

ES5에서 구현하는 상속 기능

 

자바스크립트는 프로토타입 기반 객체지향 언어입니다 . 프로토 타입 기반 객체지향 언어는 클래스가 필요없는 객체 지향 프로그래밍언어입니다 . ES5에서는 클래스 없이도 다음과 같이 생성자 함수와프로토타입을 통해 객체 지향언어의 상속을 구현할 수 있습니다.

Object.create() 사용하기

Object.create(부모object);

이렇게 사용하시면 이 자리에 오브젝트 자료형 하나가 남습니다. 

그리고 소괄호 안에 적은 부모object가 유전자(prototype)가 되는 것이고요

 

 

그럼 자식이라는 object는 부모를 prototype으로 두게 됩니다.

그럼 자식.name 해도 'Kim'이 출력되고요, 자식.age 해도 50이 출력됩니다. 

자식이 성공적으로 부모 속성들을 상속할 수 있습니다

자식의 age를 20으로 바꾸고 싶다면 위처럼 작성해주면 된다.

💡부모로부터 상속받은 50이라는 age가 출력되지 않는 이유는?

자바스크립트 오브젝트 자료형에서 특정 자료를 꺼낼 때 묻는 순서가 있다.

자식.age를 꺼내주세요~ 라고 하면 

1. 자식이라는 object가 직접 age를 가지고 있으면 그거 출력

2. 없으면 자식의 부모 prototype을 뒤져서 age가 거기 있으면 그거 출력

3. 거기도 없으면 부모의 부모 prototype을 뒤져서.. 

이런 순서로 age를 출력합니다. 

그래서 20이 나오는 것입니다. 

 

부모가 가진 속성, 자식이 가진 속성을 전부 물려받는 손자를 만들어봅시다. 

손자라는 변수는 부모가 가진 속성을 모두 물려받습니다 손자.age는 20이 출력됩니다.

// ES5 생성자 함수
var Person = (function () {
  // 생성자 함수
  function Person(name) {
    this.name = name;
  }

  // 프로토타입 메서드
  Person.prototype.sayHi = function () {
    console.log('Hi! My name is ' + this.name);
  };

  // 생성자 함수 반환
  return Person;
}());

// 인스턴스 생성
var me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee

 

클래스

 

1) 클래스 사용법

클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자),  프로토타입메서드,정적메서드 세가지가 있다.

// 클래스 선언문
class Person {
  // 생성자
  constructor(name) {
    // 인스턴스 생성 및 초기화
    this.name = name; // name 프로퍼티는 public하다.
  }

  // 프로토타입 메서드
  sayHi() {
    console.log(`Hi! My name is ${this.name}`);
  }

  // 정적 메서드
  static sayHello() {
    console.log('Hello!');
  }
}

// 인스턴스 생성
const me = new Person('Lee');

// 인스턴스의 프로퍼티 참조
console.log(me.name); // Lee
// 프로토타입 메서드 호출
me.sayHi(); // Hi! My name is Lee
// 정적 메서드 호출
Person.sayHello(); // Hello!

2) Class로 구현하는 상속기능

클래스는 인스턴스를 생성하기 위한 생성자 함수이다.

 

상속가능한 함수를 추가하려면 어떻게 해야할까요?

1. 함수를 this.sayHi 이렇게 constructor 안에 추가하는 방법

2. 기계의 prototype에 추가하는 방법이 있습니다  

💜constructor💜

인스턴스를 생성할 때 클래스 외부에서 인스턴스 프로퍼티의 초기값을 전달하려면 다음과 같이 constructor에 매개변수를 선언하고 인스턴스를 생성할 때 초기값을 전달한다. 이때 초기값을 constructor의 매개변수에게 전달된다.

constructor안에 파라미터 추가하기

ES6 방식으로 constructor 만들 때 파라미터를 추가하려면 이렇게 하시면 됩니다. 

💜prototype💜

생성자 함수를 사용하여 인스턴스를 생성하는 경우 프로토타입 메서드를 생성하기 위해서는 다음과 같이 명시적으로 프로토타입에 메서드를 추가해야한다.

class Person {
  // 생성자
  constructor(name) {
    // 인스턴스 생성 및 초기화
    this.name = name;
  }

  // 프로토타입 메서드
  sayHi() {
    console.log(`Hi! My name is ${this.name}`);
  }
}

const me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee

클래스 몸체에서 정의한 메서드는 생성자함수에 의한 객체 생성 방식과는 다르게 클래스의 prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 된다.

 

자식은 sayHi()라고 썼을 때 부모의 prototype에 있던 sayHi() 함수를 쓸 수 있습니다.

(혹은  부모.prototype.sayHi = function(){} 이렇게 해도됨)