서론
자바스크립트의 함수는 객체이다. 처음 이 말을 들었을 때 너무나 큰 충격을 받았다. 함수가 객체라니. 이 말은 무엇인가?
function test() {
// contents
}
var variable = new test();위와 같이 변수에 함수를 할당할 수 있다는 소리다. 실제로 크롬의 콘솔창을 열어 작성을 해보면 다음과 같은 결과를 얻을 수 있다.
그리고 variable을 들여다보면 test {} 이것은 분명 객체다. 이게 어떻게 된 일인지 조금 알아보자.
본론
1. prototype
mozilla 설명에 따르면 Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다.이라는 내용을 확인할 수 있다.
앞서 보았던 test() 함수를 조금 수정해보자.
function Car(name, color, weight) {
this.name = name;
this.color = color;
this.weight = weight;
}
var variable = new Car('super', 'red', 10);위 처럼 'Car'라는 함수에 파라미터로 name, color, weight를 받아서 객체 내부에 할당을 하였다. 함수는 객체니까 충분히 가능하다. 그리고 variable을 콘솔에 찍으면 결과는 다음과 같다.
실제로 함수가 객체와 같다는 것을 비교해 보려면 객체 리터럴 {}로 할당을 해보면 쉽게 알 수 있다.
결과가 같다.
그럼 결과를 다시 보자. 자세히 들여다 보면, 공통적으로 prototpye이라는 것을 볼 수 있다. Car라는 객체를 생성하게 되면, 그 안에 property를 가지고 또 prototype이라는 것을 가진다. 동시에 Car의 prototpye이라는 객체가 하나 더 생기게 되는데 이를 Car의 prototype이라는 property가 참조한다. Car prototype 객체 아래에는 constructor라는 property를 가지고 있고 이것은 다시 Car를 참조한다. 이를 그림으로 보면 아래와 같다.
그래서 다음과 같은 작업이 가능하다.
Car.prototpye.setString = 'set';
Car.prototpye.setFunction = function set () {console.log('set')};
variable.setString;
variable.setFunction();2. prototype chaining
이제 포로토타입 체이닝에 대해 알아보자. 아래 소스코드를 보고 console.log()에 찍힐 값이 무엇인지 예측해보자.
function GrandParent() {}
GrandParent.prototype.value = 'value';
function Parent() {}
Parent.prototype = new GrandParent();
function Child() {}
Child.prototype = new Parent();
var child = new Child();
console.log(child.value); // 값은?정답은 value이다.
Child 내부에는 value값이 없지만 프로토타입 체이닝에 의해 값을 순차적으로 확인해가며 value를 찾게 된다. 그리고 GrandParent의 prototpye에서 vlaue를 찾아서 출력을 한 것이다. 이것을 prototype chainig이라고 한다.
만약 값이 없을 땐 어디로 올라갈까? Object 객체까지 올라가게 된다. 마지막까지 찾는 값이 없으면 undeifned를 리턴한다.
3. __proto__
__proto__는 생성자 함수를 통해 생성한 객체아래에 가지고, 이는 생성자 함수의 prototype 객체를 참조한다. 이전 소스코드에서 variable이라는 변수에 new Car()로 객체를 생성해주었다. 그럼 variable 변수 아래에 __proto__를 가지게 되는 것이다.
var variable = new Car('super', 'red', 10);
var variable2 = new Car('classic', 'blue', 5);그림을 통해 구조를 살펴보자.
결론
javascript의 객체 상속을 위해 사용되고 있는 prototpye. javasciprt의 class도 사실 내부적으로 prototpye을 사용하고 있다는 것을 알고 2차 충격을 받았다. 1년이나 쓰면서 어떤 구조로 돌아가고 있는지 몰랐는데, 깊이 있는 공부를 더 열심히 해야겠다는 생각이 들었다.
참고 자료
