우리가 객체를 생성하는 방법을 크게 2가지로 배웠습니다.

리터럴 방식

1
var o = {x:1,y:2}

객체 생성자를 통한 방식

1
2
3
var o = new Object();
o.x = 1;
o.y = 2;

모든 함수는 prototype이라는 프로퍼티를 가지고 있습니다. (함수도 객체이기 때문에 프로퍼티를 갖는게 가능합니다.)
이 prototype프로퍼티의 역할은, 이 함수를 통해 생성되는 객체에게 prototype프로퍼티의 값을 상속해주는 역할을 합니다.​

객체를 생성하면 우리가 만든 객체는 Object라는 최상위 함수 객체의 prototype이라는 프로퍼티를 상속받게 됩니다. ​
즉 우리가 위에서 생성한 ‘o’라는 객체는, Object라는 함수 객체가 가지고 있는 prototype 프로티의 값들들 상속받는 것입니다. Object​의 prototype 프로퍼티를 확인해보기 위해서는 콘솔을 찍어보면 되겠죠?
console.log(Object.prototype);

그러면 toString, valueOf등의 매쏘드 들이 보일겁니다. 즉 우리는 Object의 prototype로 부터 값들을 상속받아서 o.toString()같이 매쏘드들을 사용할 수 있는 것입니다.

한단계 더 들어가 보겠습니다.

1
2
var d = new Date();
console.log(d.toString());

위 소스에서 우리는 Date라는 함수를 통해 d라는 객체를 만들었습니다.
그런데 d객체에서도 toString이라는 함수를 쓸수 있습니다. 이상합니다. 분명 toStringObject라는 객체의 prototype에 있는 매쏘드라고 했는데… 여긴 Object가 등장 안하잖아요!

천천히 살펴보면 그 이유를 알 수 있습니다.
먼저 d객체는 Date라는 함수로 부터 생성되었습니다. 이에 따라 Date의 prototype 프로퍼티가 가지고 있는 요소들(getHours등..)을 사용할 수 있습니다.
그리고 요 Date라는 함수또한 객체이기 때문에 생성될 당시 Object객체로 부터 값들을 상속받습니다.

즉 모든 객체는 최상위 객체인 Object로 부터 상속을 받습니다. 따라서 배열, 함수등에도 toString이라는 매쏘드를 사용할 수 있는 것입니다.

그리고 dDate를 상속받고, Date는 Object를 상속받고… 이러한 관계를 프로토타입 체인이라고 합니다. 모든 자바스크립트의 객체는 이러한 방식으로 매쏘드를 상속받아 사용하는 것입니다. 스터디때도 봤지만 대표적인것이 dom의 프로토타입 체인입니다.
예 : document.getElementsByTagName('body').toString()​ 같은 매쏘드를 쓸 수 있죵.


직접 프로토타입을 활용한 상속을 해봅시다.

1
2
3
4
5
6
7
var A = function(){this.x = 1;}
var obj = new A();
A.prototype.y = 2;
A.prototype.plus = function(){
return this.x + this.y
}
console.log(obj.plus());

위에서 obj는 함수 A를 통해 만든 객체 입니다. 따라서 A의 프로토타입에 있는 항목들을 상속받습니다.
A,함수에서의 this는 함수를 호출한 놈. 즉 위에서는 obj를 가리킵니다.

헌데 5번라인까지는 A의 prototype이 없기 때문에 상속받을 것이 없습니다. 그 이후 7,8번 열에서 프로토타입이 정의 됩니다. 따라서 12번 열에서 obj객체가 plus라는 매쏘드를 사용할 수 있는 것입니다.

프로토타입 체인을 정리해보면..
obj는 A의 프로토타입 프로퍼티로부터 상속받고
AObject(최상위 객체)로 부터 값을 상속받습니다.

그렇다면 위 소스에서

1
2
var obj2 = new A();
console.log(obj2.plus());

를 추가하면 어떻게 될까요?
한번 생각해 보세요~

다음주는 객체 지향 프로그래밍을 좀 더 실용적인 예를 통해 스터디 하겠습니다.