[JavaScript] 상속

상속

1. 상속(inheritance)이란?

객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 

단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다. 

상속 받은 객체가 부모 객체의 어떠한 기능은 제외하고 어떠한 기능은 추가해서 자신의 맥락에 맞게 부모의 객체의 로직을 재활용하면서 또 그 맥락에 맞는 로직을 제거하거나 추가하면서 재활용할 수 있다.

아래 코드는 이전 시간에 살펴본 코드다.

function Person(name){

    this.name = name;

    this.introduce = function(){

        return 'My name is '+this.name; 

    }   

}

var p1 = new Person('sibal');

document.write(p1.introduce()+"<br />");

결과)

My name is sibal

프로퍼티를 셋팅하는 방법으로 생성자를 사용함

생성자 말고도 다른 방법으로도 프로퍼티를 셋팅할 수 있다.

위의 코드를 아래와 같이 바꿔보자.

function Person(name){

    this.name = name;

}

Person.prototype.name=null;// Person은 객체

Person.prototype.introduce = function(){

    return 'My name is '+this.name; 

}

var p1 = new Person('egoing');

document.write(p1.introduce()+"<br />");

결과는 같다. 하지만 상속을 위한 기본적인 준비를 마쳤다. 이제 상속을 해보자. 

상속의 목적: 상위 객체의 코드를 물려받아 하위 객체에 없는 프로퍼티도 사용할 수 있게 하기 위함이다.

function Person(name){

    this.name = name;

}

Person.prototype.name=null;

Person.prototype.introduce = function(){

    return 'My name is '+this.name; 

}

 

function Programmer(name){

// 생성자--> Programmer를 통해서 만든 객체가 Person을 통해서 만든 객체와 동일한 기능을 가지도록 하는 것이 목적

    this.name = name;

    //사람이 가지고 있는 프로퍼티

}

Programmer.prototype = new Person();

// Person이라는 객체는 prototype의 값이 되는 것이다.--> 어떠한 객체를 상속받고 싶다면 그 객체를 생성자의 prototype에 할당을 시킨다.

// Programmer가 Person을 상속할 수 있었던 이유 

// new를 통해 객체가 생성되는데 자바스크립트에서는 prototype라는 속성을 생성자 함수가 가지고 있는 지를 확인한다. 그 생성자 함수안에 들어있는 

// 객체와 똑같은 객체를 만들어서 생성자의 결과로 리턴한다.

// 그래서 new Person을 통해서 만든 객체는 prototype객체가 가지고 있는 name이라는 프로퍼티와 introduce라는 메소드(함수를 introduce에 대입)를 가지고 있는 객체가 프로토타입 안에 들어가 있기 때문에 new Person을 통해 만든 객체는 name과 introduce를 가지고 있는 객체가 된다.

 

var p1 = new Programmer('sibal');

// 객체을 생성(인자 전달)

// new Programmer를 통해서 객체화 시키면 자바스크립트는 이 Programmer라고 하는 생성자 함수가 가지고 있는 prototype이라고 하는 

// 프로퍼티값과 동일한 구조(객체)를 만들어서 리턴한 것이 p1이다.

// p1은 prototype라는 생성자의 프로퍼티에 들어있는 객체와 같은데 그 객체는 new Person 즉, Person이라는 생성자를 통해 만든 객체이기 때문에 

// 그 객체가 가지고 있는 name과 introduce도 가지고 있다. 그래서 코드를 물려받아 사용할 수 있다.

document.write(p1.introduce()+"<br />");

// Programmer라는 생성자 안에는 introduce라는 메소드가 정의되어 있지 않음--> Person 생성자에 정의되어 있음 

// --> Programmer에서 introduce를 사용할 수 있었던 이유는 이 Programmer가 intoduce를 상속하기 때문이다.

Programmer이라는 생성자를 만들었다. 그리고 이 생성자의 prototype과 Person의 객체를 연결했더니 Programmer 객체도 메소드 introduce를 사용할 수 있게 되었다. 

Programmer가 Person의 기능을 상속하고 있는 것이다. 단순히 똑같은 기능을 갖게 되는 것이라면 상속의 의의는 사라질 것이다. 부모의 기능을 계승 발전할 수 있는 것이 상속의 가치다.

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();

Programmer.prototype.coding = function(){

    return "hello world";

}

function Designer(name){

    this.name = name;

}

Designer.prototype = new Person();

Designer.prototype.design = function(){

    return "beautiful!";

}

 

var p1 = new Programmer('sibal');

document.write(p1.introduce()+"<br />"); 

document.write(p1.coding()+"<br />");

var p2 = new Designer('leezche');

document.write(p2.introduce()+"<br />"); 

document.write(p2.design()+"<br />");

결과)

My name is sibal

hello world

Person 이라는 공통의 부모가 있고 Programmer와 Design이라는 객체가 Person을 상속받는다.

Programmer는 Person의 기능을 가지고 있으면서 Person이 가지고 있지 않은 기능인 메소드 coding을 가지고 있다.