JS prototype (2018.10.01)

MyObject.prototype.myMethod = function() {…};

프로토타입을 처음 접했을 때 제일 궁금했던 점은 ‘왜 함수 내부에 메소드나 변수를 정의하나, prototype을 사용하여 정의하나 똑같은거 아닌가?’ 였다.

이 궁금증에 대한 해답을 찾았다.

 

// without Prototype
function MyClass(name) {
    this.name = name;
    this.sayMyName = function() {
        console.log(this.name);
    }
}

var MyClass1 = new A("I'm MyClass1");
var MyClass2 = new A("I'm MyClass2");
console.log(MyClass1.sayMyName === MyClass2.sayMyName); // false


// with Prototype
function MyClassWithProto(name) {
    this.name = name;
}
A.prototype.sayMyName = function() {
    console.log(this.name);
}

var MyClassWithProto1 = new AWithProto("I'm MyClassWithProto1");
var MyClassWithProto2 = new AWithProto("I'm MyClassWithProto2");
console.log(MyClassWithProto1.sayMyName === MyClassWithProto2.sayMyName); // true

1–11번째 줄에는 함수 내부에 메소드를 구현한 모습을,
14–24번째 줄에는 프로토타입으로 메소드를 구현한 모습을 보여준다.

가장 큰 차이점은 메모리 할당이다.

프로토타입 없이 생성한 함수로 객체를 생성할 때에는, 변수 name과 함수 sayMyNamed이 항상 한벌씩 생성된다.(MyClass1과 MyClass2의 sayMyName함수가 서로 다르다.) 만약 같은 객체를 100개 만들었다 생각해보자. 그러면 모르긴 몰라도 자원을 많이 쓰고있을것이다!

그렇다면 프로토타입으로 메소드를 정의하고, 객체를 생성하는 밑의 예를 보자. 위와 같이 name은 항상 생성되나, 모든 객체에서 같은 일을 하는 sayMyName함수는 하나만 생성된다! (MyClassWithProto1과 MyClassWithProto2의 sayMyName함수가 서로 같다!)

조금 더 나아가서…

이는 마치 Java의스태틱 메소드와 같은 느낌을 주는데, 이와는 조금 차이가 있다. 결론부터 말하면 this키워드의 가용 여부이다.

Java에서 스태틱 메소드는 인스턴스 생성과는 별도로 클래스가 로드될 때 메모리에 올라가게 되는데, 이때 앞으로 생성될 인스턴스의 정보를 알 수 없기에 this라는 인스턴스 변수를 사용할 수가 없다.

하지만 JS에서는 왜가능할까?

나만의 생각이지만, new를 통해 객체를 생성하면 생성된 객체 내에 __proto__라는 변수가 생기고, 그 안에 프로토타입체인에 대한 정보가 담기는데, 이 때문에 this 키워드가 생성된 인스턴스가 누군지 알 수 있기에 허용되지 않나 싶다.