[JS] 생성자 함수를 사용하여 객체를 생성할 때 주의할 점

생성자 함수를 사용하여 객체를 생성하면 파라미터에 속성값을 넘겨주는 방식으로 해당 생성자 함수를 일종의 틀로서 사용하여 여러 객체를 만드는 데 유용하다.

function Person(name, age){
	this.name = name;
	this.age = age;
	this.sayHello = function(){
		console.log(this.name + 'Hello!');
	}
};

var person1 = new Person('michelle', 27);
var person2 = new Person('frank', 36);
var person3 = new Person('demi', 27);

다만 위 코드에서 한 가지 문제를 지적하자면, 생성자 함수를 사용하여 생성된 객체는 name, age라는 속성명과, sayHello라는 함수를 복사본의 형태로 갖게 된다. 따라서 하나의 객체는 생성자 함수에 정의된 프로퍼티와 메서드만큼의 메모리를 필요로 한다.

프로퍼티는 (대부분의 경우) 객체마다 다른 정보를 저장하고 있을 테니 각자의 메모리를 할당하는 것이 맞다. 하지만 메서드는 생성된 모든 객체에 대해 공통의 기능을 수행하기 위해 존재하는데, 객체를 생성할 때마다 똑같은 함수의 복사본을 생성하는 것은 메모리 효율 측면에서 좋지 않다.

따라서 생성자 함수에서 메서드는 아래와 같이 prototype으로 정의하는 것이 좋다.

function Person(name, age){
	this.name = name;
	this.age = age;
	Person.prototype.sayHello = function(){
		console.log(this.name + 'Hello!');
	}
};

var person1 = new Person('michelle', 27);
var person2 = new Person('frank', 36);

이렇게 하면 공통의 메서드가 Person의 프로토타입 객체에 존재하게 되고 여러 개의 Person 객체들은 sayHello가 호출되면 프로토타입 체인을 통해 자신의 프로토타입에서 sayHello를 찾아 실행하게 된다. 즉, 복수의 객체들이 하나의 메서드를 가리키게 할 수 있는 것이다.

결론) 생성자 함수에서 메서드는 this.keyword 표현이 아닌, 객체의 prototype의 인스턴스로 정의하는 것이 메모리 활용 측면에서 좋다.

참고자료: 이화랑 블로그