자바스크립트 코딩 기법과 핵심 패턴 - 사용자 정의 생성자 함수

사용자 정의 생성자 함수

객체 리터럴이나 내장 생성자 함수를 쓰지 않고 직접 생성자 함수를 만들어 객체를 생성할 수도 있다.

var Person = function(name){

this.name = name;

this.say = function(){

return "I am " + this.name;

};

};

var adam = new Person("adam");

console.log(adam.say()); // 'I am adam"

new와 함께 생성자 함수를 호출하면 함수 안에서 다음과 같은 일이 일어난다.

• 빈 객체가 생성된다. 이 객체는 this 라는 변수로 참조할 수 있고, 해당 함수의 프로토타입을 상속 받는다.
• this로 참조되는 객체에 프로퍼티와 메서드가 추가된다.
• 마지막에 다른 객체가 명시적으로 반환되지 않을 경우, this 로 참조된 이 객체가 반환 된다.

즉 다음과 같이 진행 된다고 할 수 있다.

var Person = function(name){

// 객체 리터럴로 새로운 객체를 생성한다.

// var this = {};

// 프로퍼티와 메서드를 추가한다.

this.name = name;

this.say = function(){

return "I am " + this.name;

};

// this를 반환한다.

// return this;

};

이 예제에서는 간단히 say()라는 메서드를 this에 추가했다. 결과적으로 new Persion()을 호출할 때마다 메모리에 새로운 함수가 생성된다. say()라는 메서드는 인스턴스별로 달라지는게 아니므로 이런방식은 비효율적이므로 이 메서드는 Persion의 프로토타입에 추가하는 것이  더 낫다.

var Person = function(name){

this.name = name;

};

Person.prototype.say = function(){

return "I am " + this.name;

}

var adam = new Person("adam");

console.log(adam.say()); // 'I am adam"

생성자 내부의 this는 Persion의 프로토타입을 상속 받는다. 즉 다음 코드에 더 가깝다.

var this = Object.create(Persion.prototype);

생성자의 반환 값

함수 내에 return 문을 쓰지 않았더라도 생성자는 암묵적으로 this를 반환한다. 그러나 반환 값이 될 객체를 따로 정할 수도 있다. 다음 예제에서 새로운 객체를 생성하여 that으로 참조하고 반환하는 것을 볼 수 있다.

var Objectmarker = function(){

// 생성자가 다른 객체를 대신 반환하기로 결정했기 때문에

// 다음의 'name' 프로퍼티는 무시된다.

this.name = "this is it";

// 새로운 객체를 생성하여 반환한다.

var that = {};

that.name = "And that's that";

return that;

}

// 결과

var o = new Objectmarker();

console.log(o.name); // 'And that's that'