상속 과정편

상속(inheritance)이란?

 

객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있습니다.. 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미합니다. 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해줍니다.

 

 예를 들어봅니다.

 

function Person(name){
    this.name = name;
    this.introduce = function(){
        return 'My name is '+this.name; 
    }   
}
let 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; 
}
var p1 = new Person('egoing');
document.write(p1.introduce()+"<br />");

 

person 이라고 하는 객체에 prototype.라고하는 프로퍼티에  어느 객체.name 이라고하면  그객체 안에 값을 줄수 있고

 

person.prototype.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('egoing');
document.write(p1.introduce()+"<br />");

 

이렇게 하게 되면 myname is egoing이라는 결과가 나옵니다.

우리는 p1.introduce()d이거를 정의한적이 없습니다만

어디에 정의되어 있나면 function Person(name)이라고 하는 객체에

Person.prototype.introduce  prototype으로 introduce라는 메소드가 정의되어 있습니다.

 

어떻게 가능하나면 Programmer가 introduce를 상속 받은 것입니다.

 

이programmer가 이생성자가 가지고 있는 프로퍼티중에 

Programmer.prototype 값으로 new Person();

 

function Person(name) 이객체가 생성되는데 

이객체를 생성할때 prototype이라는 프로퍼티를 가지고 있는 지 확인합니다.

 

 

this.name = name; 값을 지정해서 

Person.prototype.name=null; 값을 가지게 됩니다.

 

name과 introduce라는 메소드가 
Person.prototype.name=null;

Person.prototype.introduce = function()

 

이렇게 prototype에 들어가 있기 때문에

 

new person()은 Person.prototype.name=null;

Person.prototype.introduce = function()를 가지고 있습니다.

 

그객체가 prototype이라는 이 속성에 값이 됩니다.

 

그상태에서 new Programmer을 해서 생성자를 객체화해서

동일한 객체를 리턴해줘서 만든게 p1입니다.

 

 

 이 포스팅은 생활코딩을 보고 만들었습니다. egoing님 감사합니다.