[ JavaScript ] JS 상속

이미지 출처 :        https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

---

 

 

 

- 상속

 

 

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

 

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

 

아직까지는 상속을 이런식으로하는구나 까지 이해하면 좋습니다.

 

 

그럼 다음 예제 보겠습니다.

 

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을 가지고있습니다.

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.