[JavaScript] 상속과 Prototype

 

Prototype은 생성자(Construtcor)외의 상속(Inheritance)을 구현할 수 있는 또 하나의 문법 입니다.

생성자(Constructor)가 가지고 있던 속성들을 그대로 물려받아 오브젝트를 만들기 때문에 상속이라고 부르며 Constructor를 부모, 생성된 오브젝트를 자식이라고 합니다.

 

 

 

Prototype을 직역하면 유전자라는 뜻이 됩니다.

그리고 Constructor를 만들면 Prototype이라는 공간이 자동으로 생깁니다. 

Prototype에 값을 추가하게 되면 모든 자식들이 물려받게 됩니다.

 

function Fc(name){ // Constructor, 상속관계에서 부모
	this.name = name;
    this.age = 15;
    this.say = function(){ console.log('안녕하세요, 저는 ' + this.name + ' 입니다.') };
}

Fc.prototype.gender = '남자';

var user1 = new Fc('Park'); // Object, 상속관계에서 자식
var user2 = new Fc('Kim'); // Object, 상속관계에서 자식

console.log(user1); // Fc { name: 'Park', age: 15, say: [Function] }
console.log(user1.gender); // 남자

 

 

 

위 코드에서 user1을 호출하면 Prototype으로 선언한 gender 값은 나타나지 않지만 user1.gender 라는 방식으로 gender가 존재함을 알 수 있고, 그 값이 선언한 값으로 저장된 것을 확인할 수 있습니다.

 

 

 

 

 

 

Prototype 동작 원리

오브젝트의 속성을 호출하게 되면 가장 먼저 호출한 오브젝트가 직접 가지고 있는 값들 중에서 해당 속성이 있는지 찾고 그 이후 Prototype에 호출된 속성을 찾게 됩니다.

console.log(user1.gender);

1) user1의 속성값에 직접 gender값이 저장되어 있는지 찾는다. 

2) 저장된 gender값이 확인된다면 출력한다.

3) 없다면, user1의 Prototype에서 gender값이 저장되어 있는지 찾는다.

4) 저장된 gender값이 확인된다면 출력한다.

 

 

 

 

자바스크립트 내장 함수를 쓸 수 있는 이유?

toString()과 같은 내장함수를 자신이 직접 선언하지 않았는데도 사용할 수 있는 이유는, 오브젝트의 모든 부모를 서치하기 때문이다. 부모의 부모의 부모의... 식으로 찾아서 올라가기 때문에 윗단에 있는 toString()이라는 내장함수도 별도로 선언하지 않아도 사용할 수 있게 된다.

 

 

 

 

상속(Inheritance)과 Prototype기능으로 이해하는 배열과 오브젝트 생성

// 우리가 일반적으로 쓰는 배열 생성 방법
var arr = [1,2,3];

// 실제로 동작되는 배열 생성 방식
var arr = new Array(1,2,3);

----------------------

// 우리가 일반적으로 쓰는 object 자료형 생성 방법
var obj = { name : 'Kim'};

// 실제로 동작되는 object 자료형 생성 방식
var obj = new Object({name:'kim'});

위 코드에서 배열형식을 만들 때 생성자(Constructor)를 따로 만들지 않아도 new를 사용하여 배열 오브젝트를 만들어 낼 수 있으며, 배열을 var arr = [1,2,3];으로 선언하더라도 var arr = new Array(1,2,3);으로 동작하게 됩니다.

즉, 생성자(Constructor)를 통한 상속(Inheritance)으로 배열을 생성하게 됩니다.

 

 

또한 배열의 내장함수인 sort, slice, splice, filter등 모두 Prototype으로 선언되어 있기 때문에 닷(.)을 사용하여 별도로 선언하지 않아도 사용할 수 있습니다.

 

 

object 자료형 또한 배열과 동일합니다.