생성자(Constructor) 함수와 프로토타입

생성자 함수를 통해 인스턴스를 여러개 만들어 낼 수 있습니다. 이 생성자로는 예전에 많이 사용하던 고전적인 생성자함수, 그리고 es2015부터 새로 나온 class에도 생성자 함수가 있습니다.

Constructor, prototype, instance의 관계

• 모든 함수는 생성자가 될 수 있고, 모든 함수는 prototype 프로퍼티를 가지고 있습니다.
• __proto__는 생성자 함수의 prototype프로퍼티를 참조합니다.
• 생성자를 이용해 만든 객체는 자동으로 그 함수에 객체인 prototype 프로프티가 부여됩니다.
• 자동으로 생성된 인스턴스의 __proto__는 생성자 함수의 prototype프로퍼티를 참조하게 됩니다.
• __proto__ 프로퍼티는 생략 가능하도록 구현돼 있기 때문에 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 됩니다.

1. 프로토타입과 생성자함수

프로토타입과 생성자함수를 통해 내가 사용하고 있는 이 객체들이 어디서부터 파생되는 것인지 알아낼 수 있다는 것을 알 수 있습니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const jang = new Person('jang', 99)
const hs  = new Person('hs', 11)

//jang과 hs 객체를 생성한 객체는 Person() 생성자 함수임을 알 수 있습니다.
console.log(jang.constructor.name); //Person
console.log(hs.constructor.name); //Person

Person()을 통해 생성한 인스턴스의 constructor을 확인해보면 jang과 hs 모두 생성자함수 Person을 가르키고 있는 것을 알 수 있습니다. 이렇게 어떤 생성자를 통해 인스턴스가 생성되었는지도 확인을 할 수 있습니다.

그렇다면 기존으로 쉽게 사용했던 객체, 배열, 함수, 문자열 등은 어떤지 확인해보도록 하겠습니다.

const str='문자열';
const str2 =  new String('str');
const obj = {};
const arr = [];
const func = function(){}

console.log(str.constructor.name) //String
console.log(arr.constructor.name) //Array
console.log(obj.constructor.name) //Object
console.log(func.constructor.name) //Function

이렇게 객체는 모든 값들이 내부적으로 프로토타입을 가지고 있으며, 이 프로토타입을 통해서 어떤 생성자로부터 생성이 되었는지를 유추할 수 있다는 것을 알 수 있습니다.

여기서 instanceof를 활용해서도 인스턴스의 생성자를 확인할 수 있습니다.

console.log(jang instanceof Person) //true
console.log(hs instanceof Person) //true

console.log(arr instanceof Array)// true
console.log(obj instanceof Object)// true
console.log(func instanceof Function)// true
console.log(str2 instanceof String)// true

console.log(str instanceof String)// false : 래퍼객체로 만든것 X

참고 :Stirng, Number, Boolean을 생성자로 사용하는 것은 권장하지 않습니다.

즉, 객체의 생성자함수를 확인하는 방법에는 두가지가 있습니다.

• str.constructor.name
• str instanceof String

이렇게 어떻게 값을 만들고 사용을 해도 모두 프로토타입으로 링크가 되어 있고 동작을 하기 때문에 자바스크립트의 프로토타입은 나도 모르게 사용을 하고 있는 것입니다.

자바스크립트를 다룰 때 class로도 깔끔하게 다룰 수도 있지만 가끔은 프로토타입에 직접 접근을 해서 사용을 하거나, 생성자함수를 만들면서 사용을 할 때가 있을 것입니다.

---

참고자료

• MDN
• 장현석 강사님의 강의
• 코어자바스크립트