(Javascript) 자바스크립트 심화 (8) 상속

안녕하세요. 

영감을 주는 개발자 방민방민입니다.

오늘은 자바스크립트에 있어서 상속에 대해서 알아보고자 합니다.

상속이란 기존 객체가 가지는 속성(프로퍼티)들을 받아 사용하는 것을 말합니다.

상속을 받게되면 A 라는 객체의 a, b 속성을 상속받아, a,b, c와 같이 a,b 를 포함하며 새롭게 c 를 추가시킨 새로운 객체를 만들 수 있습니다. 

예제를 통해 알아보도록 하겠습니다.

바로 시작하도록 하겠습니다.

1.  상속

먼저 아래의 예제 코드를 살펴 보겠습니다.

function Person(name){
	this.name = name;
	this.introduce = function(){
		return 'My name is ' + this.name;
	}
}

var p1 = new Person('Bangmin');

alert(p1.introduce());

위의 코드는 이전에 객체에서 배운것과 같이, "My name is Bangmin" 이라는 문장을 알람으로 출력합니다.

위의 코드를 조금 변형시켜 보겠습니다.

function Person(name){
	this.name = name;
}

Person.prototype.introduce = function(){
		return 'My name is ' + this.name;
	}
	
var p1 = new Person('Bangmin');

alert(p1.introduce());

두 예제는 아래와 같은 동일한 결과를 출력합니다.

처음 객체의 틀을 만드는 function Person(name) 에는 name 만을 초기화하는 생성자를 두었음에도 호출이 정확하게 이루어지는 것을 확인 할 수 있었습니다.

바뀐 부분은 객체의 틀을 만든 뒤에 'Person.prototype.' 을 이용하여 추가적으로 내무 메서드를 생성해 주었다는 점입니다.

2. 상속 구현

먼저 아래 코드를 살펴보도록 하겠습니다

function Person(name){
	this.name = name;
}
Person.prototype.name = null;
Person.prototype.introduce = function(){
		return 'My name is ' + this.name;
}

function Programmer(name){
	this.name = name;
}
Programmer.prototype = new Person();
var p1 = new Programmer('Bangmin');
alert(p1.introduce());

Programmer 라는 생성자에는 introduce라는 메서드가 선언되어 있지 않음에도 불구하고, alert 을 통해 My name is Bangmin 이라는 문장을 출력하게 됩니다. 이는 Programmer 라는 객체 생성자가 Programmer.prototype = new Person(); 라는 코드를 통해 Person 객체가 가지는 기능을 상속하였기 때문입니다. 

3. 상속 후 추가 기능

상속을 통해 특정 기능을 상속받게 된 뒤 다른 기능을 추가하고 싶을 수 있습니다. 이때, prototype 을 활용하여 새로운 기능, 혹은 변수를 추가해 줄 수있습니다.

예를 들어 사람의 기본 기능인 이름과 소개를 상속받은 프로그래머는 '코딩' 이라는 기능을 새롭게 추가하여 프로그래머만의 정체성을 확립할 수있습니다. 

또한 같은 맥락으로 디자이너는 사람의 기능을 상속받고 '그림' 이라는 기능을 추가하여 정체성을 확립합니다. 

아래의 예제를 보도록 하겠습니다.

function Person(name){
	this.name = name;
}
Person.prototype.name = null;
Person.prototype.introduce = function(){
		return 'My name is ' + this.name;
}

function Programmer(name){//프로그래머 객체 틀 생성
	this.name = name;
}
Programmer.prototype = new Person();// Person의 기능을 상속
Programmer.prototype.coding = function(){//coding 기능을 추가
	return 'Hello world';
}
var p1 = new Programmer('Bangmin');
alert(p1.introduce());
alert(p1.coding());

function Designer(name){
	this.name = name;
}

Designer.prototype = new Person();
Designer.prototype.design = function(){//drawing 기능을 추가
	return 'drawing';
}

p2 = new Designer("Minseok");
//alert(p2.coding());//실행할 수 없음
alert(p2.introduce());
alert(p2.design());

디자이너와 프로그래머에게 사람의 기능을 상속해주는 객체는 'Person'으로 같습니다. 그러나 디자이너는 코딩 기능을 수행할 수 없고, 프로그래머는 그림 기능을 수행할 수 없습니다.

4. Prototype

위에서 상속에서 사용한 프로토타입은 무엇일까? 바로 객체의 원형입니다. 특정 객체에서 프로토타입을 통해 상속을 받게 되면, 프로토타입이라는 객체의 원형에 상속받고자 하는 객체의 원형이 들어오게 됩니다. 아래의 코드를 통해 살펴보겠습니다.

function Ultra(){}
Ultra.prototype.ultraProp = true;

function Super(){}
Super.prototype = new Ultra();//Ultra 를 상속

function Sub(){}
Sub.prototype = new Super();//Super를 상속

var o = new Sub();

alert(o.ultraProp);

Super 객체는 Ultra 를 상속한다. 즉 Super 객체의 prototype 에는 Ultra 객체의 원형을 복제하여 가지고 있게 됩니다.

Sub 객체는 Super 를 상속한다. 즉 Sub 객체의 prototype 에는 Super 객체의 원형을 복제하여 가지고 있게 됩니다.

이렇게 상속을 통해 Sub 은 Super 를 , Super는 Ultra 를 상속한다.  Sub<- Super <- Ultra 의 관계가 설정됩니다.

아들은 어머니의 어머니는 할머니의 유전을 상속받는다, 결국 아들은 할머니의 유전을 상속받는다. 

이렇게 생각하면 조금 편할것입니다.

상속은 어렵지만 반드시 잡고 가야하는 개념입니다. 오늘은 많은 내용을 다루었지만 천천히 따라가면 이해하지 못할것이 없을 것입니다. 할수 있습니다. 화이팅!

지금까지 영감을 주는 개발자 방민방민이었습니다.