power-girl0-0

[객체지향] 상속 본문

언어/Javascript

[객체지향] 상속

power-girl0-0 2021. 2. 5. 23:02
728x90

 

 

생활코딩 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743)


 상속(inheritance) 

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

또한, 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해주는 기능을 제공해준다.

 

이를 통해 상속받는 객체는 자신이 원하는 맥락에 맞게 부모 객체를  재활용하면서, 로직을 추가하거나 제거할 수 있다.

 

- 약속 되어 있는 property : 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('egoing');
document.write(p1.introduce()+"<br />");

위 코드에서는 Programmer이라는 생성자를 만들었다.

그 후, 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('egoing');
document.write(p1.introduce()+"<br />");
document.write(p1.coding()+"<br />");

위 소스 결과는 My name is egoing과 hello world가 나온다.

 

위 결과를 통해 알 수 있는 점은 Programmer는 Person의 기능을 가지고 있으면서, Person이 가지고 있지 않은 기능인 메소드 coding도 가지고 있다. 

 

즉, 상속은 상속받은 기능을 확장해서 자신의 맥락에 맞는 기능들을 추가할 수 있다.

또한, 부모 객체를 변경하면 자식 객체의 내용도 같이 변경되므로, 변경사항이 있을 때 변경하기 쉬운 장점을 가지고 있다.

 

 

 

 

728x90

'언어 > Javascript' 카테고리의 다른 글

[객체지향] 표준 내장 객체의 확장  (0) 2021.02.05
[객체지향] prototype  (0) 2021.02.05
[객체지향] this  (0) 2021.02.05
[객체지향] 전역객체  (0) 2021.02.05
[객체지향] 생성자와 new  (0) 2021.02.05
Comments