[ JavaScript ] 자바스크립트 기본 문법 | 상속(inheritance)이란 무엇인가?

이미지 출처 :   https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

자바스크립트 기본 문법  ::  상속

 

 

객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있습니다.

 

상속(inheritance)은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미합니다.

 

 

단순히 물려받는 것이라면 의미가 없고,

기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해주는 것이 상속의 역할입니다.

 

 

 

지난 포스팅에서 사용했던 코드를 들고와 보도록 하겠습니다.

 

 

 

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

 

 

 

 

 

 

위의 예제 코드는 아래와 같이 바꿀 수 있습니다.

 

 

 

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

 

 

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();
 
var p1 = new Programmer('test');
console.log(p1.introduce());

 

 

 

 

 

 

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";
}
 
var p1 = new Programmer('test');
console.log(p1.introduce());
console.log(p1.coding());

 

 

13번째 행과 같이 객체에 새로운 기능을 추가할 수 있습니다.

 

 

실행한 결과는 아래 그림과 같습니다.

 

 

 

 

 

 

Programmer는 Person의 기능을 가지고 있으면서

Person이 가지고 있지 않은 기능인 메소드 coding을 가지고 있게 되는 것입니다.