Javascript 상속(inheritance)과 프로토타입(prototype)

 

상속

 

 

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

 

 

 

 

 

 

상속의 기본적인 예.

function Person(name){
    this.name = name;
}
Person.prototype.name=null;
Person.prototype.introduce = function(){
    return 'My name is '+this.name; 
}
var p1 = new Person('jin seok');
document.write(p1.introduce()+"<br />");

• .prototype이라는 함수 성질을 이용하여 생성자를 사용하여 새로운 객체인 p1은 Person 함수안에 .prototype 함수가 붙은 Person 함수 객체에 .name과 null을 주어 어떤 값을 줄 수 있도록 정의하였다.
• 그 결과 또 다른 .prototype 함수가 붙은 곳의 메소드 .introduce 의 성질 또한 상속으로 연결되어 p1으로 상속된 것을 확인 할 수있다.

 

 

 

 

 

 

 

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

• 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 "kim";
}
 
var p1 = new Programmer('jin seok');
document.write(p1.introduce()+"<br />");
document.write(p1.coding()+"<br />");

• Programmer는 Person의 기능을 가지고 있으면서 Person이 가지고 있지 않은 기능인 메소드 coding을 가지고 있다. 
• 왜냐하면 prototype으로 상속 받고 있기 때문이다.

 

 

 

 

 

 

 

 

prototype 프로토타입

 

 

 

• 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다.
• 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. 

 

 

 

 

 

 

prototype chain

function Ultra(){}
Ultra.prototype.ultraProp = true;
 
function Super(){}
Super.prototype = new Ultra();
 
function Sub(){}
Sub.prototype = new Super();
 
var o = new Sub();
document.write(o.ultraProp);

 

• 생성자 Sub를 통해서 만들어진 객체 o가 Ultra의 프로퍼티 ultraProp에 접근 가능한 것은 prototype 체인으로 Sub와 Ultra가 연결되어 있기 때문이다. 내부적으로는 아래와 같은 일이 일어난다.

1. 객체 o에서 ultraProp를 찾는다.
2. 없다면 Sub.prototype.ultraProp를 찾는다.
3. 없다면 Super.prototype.ultraProp를 찾는다.
4. 없다면 Ultra.prototype.ultraProp를 찾는다.

• prototype는 객체와 객체를 연결하는 체인의 역할을 하는 것이다. 이러한 관계를 prototype chain이라고 한다.

 

 

※ Super.prototype = Ultra.prototype 으로하면 안된다. 이렇게하면 Super.prototype의 값을 변경하면 그것이 Ultra.prototype도 변경하기 때문이다. Super.prototype = new Ultra();는 Ultra.prototype의 원형으로 하는 객체가 생성되기 때문에 new Ultra()를 통해서 만들어진 객체에 변화가 생겨도 Ultra.prototype의 객체에는 영향을 주지 않는다.