자바스크립트 ES5에서 Class의 생성과 상속

** 클라스(class)는 동일한 항목들(properties)과 동일한 함수들을 가지고 있는 객체들을 생성하기 위해 사용됩니다. 즉, {name: "john", age: 29}, {name: "jane", age: 28}와 같이 같은 형태 다른 데이터를 가진 객체들을 생성하기 위해 사용됩니다.
** 인스턴스(instance)는 클라스를 통해 생성된 객체를 칭하는 말입니다.
** 생성자(constructor)는 클라스에서 객체를 생성할 때 사용되는 함수를 뜻합니다.
** 상속(inheritance)이란 하나의 클라스를 확장(extend)하여 기능을 추가하는 것을 말합니다.


자바스크립트의 ES6버전부터는 class 키워드를 통해 클라스를 선언하고 extends 키워드를 통해 상속(확장)할 수 있습니다. 하지만 아직 모든 브라우저가 ES6를 지원하지 않기 때문에, 모든 브라우저 지원을 위해서는 ES5의 방식으로 Class를 만들고 상속하는 방법을 알아두면 좋습니다. 물론 ES6 환경에서도 ES5의 방법을 사용할 수 있습니다.

클라스의 생성

function Human(name){
  this.name = name;
}
Human.prototype.sayHi = function(){
  console.log("Hi");
};
Human.prototype.introduceMyself = function(){
  console.log("My name is " + this.name);
};

name 항목과 sayHi, introduceSelf 함수를 가지는 Human 클라스입니다. 이때 function Human(name)이 생성자가 됩니다. 먼저 생성자를 만든 다음 함수를 선언하는데, 클라스가 가지는 모든 함수들은 prototype에 선언되어야 합니다.

Human 클라스 생성자로 인스턴스를 생성해 봅시다.

var k = new Human("K");

k.sayHi();
// "Hi"

k.introduceMyself();
// "My name is K"

위와 같이 인스턴스를 생성하기 위해서는 new 키워드와 Human 생성자를 사용해야 합니다. Human 클라스의 인스턴스들은 모두 name이라는 항목을 가지고, sayHi와 introduceMyself라는 함수를 가지고 있는 공통점이 있지만 new Human("K") 처럼 생성자에 넣어주는 값에 따라 다른 이름을 가지게 됩니다.

클라스의 상속

클라스를 상속하면 기존의 클라스에서 기능을 추가할 수 있습니다.

function Student(name, school){
  this.school = school;
  Human.call(this, name);
}
Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student;
Student.prototype.introduceMyself = function(){
  Human.prototype.introduceMyself.call(this);
  console.log("My school is " + this.school);
};

Human을 상속받은 Student 클라스입니다. 생성자의 인자로 school이 추가되었습니다.
school만 this에 직접 넣어주고 Human 생성자를 call함수로 호출하여 name을 처리하도록 합니다.

Student.prototype = Object.create(Human.prototype);를 통해 부모 클라스(Human)의 함수를 모두 가져올 수 있습니다.
하지만 생성자 함수(constructor)역시 덮어쓰여지기 때문에 Student.prototype.constructor = Student;를 통해 생성자를 다시 설정해줍니다.

introduceMyself 함수는 부모 클라스의 함수를 확장하고 있습니다. Human.prototype.introduceMyself.call(this);를 통해 부모 클라스의 함수를 호출하고, 그 외 할 일들을 지정하였습니다.

var l = new Student("L","M");

l.sayHi();
// "Hi"

l.introduceMyself();
// "My name is L"
// "My school is M"

Student 클라스에는 sayHi 함수가 없지만 Human 클라스를 상속 받았으므로 해당 함수를 사용할 수 있습니다.

또한 introduceMyself 역시 기능이 확장되었습니다.

댓글

댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP