자바스크립트 입문 제 9강

프로토타입과 클래스

객체 생성자

프로토타입과 클래스를 다루기 전에, 객체 생성자에 대하여 알아보겠습니다. 객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있게 해줍니다.

function Lion(name, major, staff) {
  this.name = name;
  this.major = major;
  this.staff = staff;
  this.lion = function() {
    if(this.staff) {
      console.log("으른사자 " + this.name);
    } else {
      console.log("아기사자 " + this.name);
    }
  };
}

const jeonghun = new Lion('반정훈', '융소', true);
const mansu = new Lion('김만수', '융소', false);

jeonghun.lion(); // 으른사자 반정훈
mansu.lion(); // 아기사자 김만수

객체 생성자를 사용 할 때는 보통 함수의 이름을 대문자로 시작하고, 새로운 객체를 만들 때에는 new 키워드를 앞에 붙여주어야 합니다.

위의 코드에서 jeonghun과 mansu의 lion 함수는 동일한 작업을 수행함에도 불구하고 객체가 생성될 때마다 함수가 새로 생성되어 this.lion으로 설정되고 있습니다.

같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용 할 수 있는데 바로 프로토타입입니다.

---

프로토타입

프로토타입은 아래와 같이 객체 생성자 함수 아래에 .prototype.[키 값] = 코드를 입력하여 설정 할 수 있습니다.

function Lion(name, major, staff) {
  this.name = name;
  this.major = major;
  this.staff = staff;
};

Lion.prototype.lion = function(){
  if(this.staff) {
      console.log("으른사자 " + this.name);
    } else {
      console.log("아기사자 " + this.name);
    }
};
Lion.prototype.sharedValue = 1;

const jeonghun = new Lion('반정훈', '융소', true);
const mansu = new Lion('김만수', '융소', false);

jeonghun.lion(); // 으른사자 반정훈
mansu.lion(); // 아기사자 김만수

---

객체 생성자 상속 받기

예를 들어서 우리가 jeonghun 과 mansu 라는 새로운 객체 생성자를 만든다고 가정해봅시다. 그리고, 해당 객체 생성자들에서 Lion 의 기능을 재사용한다고 가정해봅시다. 그렇다면, 아래처럼 구현 할 수 있습니다.

/* 이어서 */

function Staff(name, major) {
  Lion.call(this, true, name, major);
}
Staff.prototype = Lion.prototype;

function Member(name, major) {
  Lion.call(this, false, name, major);
}
Member.prototype = Lion.prototype;

const jeonghun = new Staff('반정훈', '융소');
const mansu = new Member('김만수', '융소');

jeonghun.lion(); // 으른사자 반정훈
mansu.lion(); // 아기사자 김만수

새로 만든 Staff 와 Member 함수에서 Lion.call 을 호출해주고 있는데요, 여기서 첫번째 인자에는 this 를 넣어주어야 하고, 그 이후에는 Lion 객체 생성자 함수에서 필요로 하는 파라미터를 넣어주어야 합니다.

추가적으로 prototype 을 공유해야 하기 때문에 상속받은 객체 생성자 함수를 만들고 나서 prototype 값을 Lion.prototype 으로 설정해주었습니다.

---

클래스

클래스라는 기능은 C++, Java, C#, PHP 등의 다른 프로그래밍 언어에는 있는 기능인데 자바스크립트에는 없었습니다. 예전 자바스크립트 (ES5) 에서는 클래스 문법이 따로 없어 위에서 작성한 코드처럼 객체 생성자 함수를 사용하여 비슷한 작업을 구현해왔습니다.

ES6 에서부터는 class 라는 문법이 추가되었습니다. 이는 우리가 객체 생성자로 구현했던 코드를 조금 더 명확하고, 깔끔하게 구현 할 수 있게 해줍니다. 또한, 상속도 훨씬 쉽게 해줄 수 있습니다.

class Lion {
  constructor(name, major, staff) {
    this.name = name;
    this.major = major;
    this.staff = staff;
  }
  lion() {
    if(this.staff) {
      console.log("으른사자 " + this.name);
    } else {
      console.log("아기사자 " + this.name);
    }
  }
}

const jeonghun = new Lion('반정훈', '융소', true);
const mansu = new Lion('김만수', '융소', false);

jeonghun.lion(); // 으른사자 반정훈
mansu.lion(); // 아기사자 김만수

여기서 우리가 lion 이라는 함수를 클래스 내부에 선언하였는데, 이를 ‘메서드’라고 부릅니다. 이렇게 메서드를 만들면 자동으로 prototype 으로 등록이 됩니다.

---

class 를 사용했을때에는, 다른 클래스를 쉽게 상속 할 수 있습니다.

/* 이어서 */

class Staff extends Lion {
  constructor(name, major) {
     super(name, major, true);
  }
}

class Member extends Lion {
  constructor(name, major) {
     super(name, major, false);
  }
}

const jeonghun = new Staff('반정훈', '융소');
const mansu = new Member('김만수', '융소');

jeonghun.lion(); // 으른사자 반정훈
mansu.lion(); // 아기사자 김만수

상속을 할 때는 extends 키워드를 사용하며, constructor에서 사용하는 super() 함수가 상속받은 클래스의 생성자를 가르킵니다.

---

이번 교안의 내용은 여기까지입니다.

명지대 아기사자 여러분, 여기까지 오시느라 수고 많으셨습니다. 어느덧 준비한 자바스크립트 입문의 교안이 모두 끝이 났습니다.

비록 모든 자바스크립트의 문법을 다루어 보지는 못했지만 기본기를 탄탄히 갖출 수 있도록 준비했습니다.

이 교안에서 멈추지 마시고 새로운 프로젝트의 시작으로 삼아 부족한 부분은 다른 사람들이 만든 프로젝트를 참고하기도 하면서 경험을 쌓아 가시길 바랍니다.

감사합니다.