소년코딩의 자바스크립트 강좌 20. 생성자 함수

Object와 Array는 자바스크립트 실행 환경에서 자동으로 만들어지는 네이티브 생성자다.

반면 커스텀 생성자를 만들어서 원하는 타입의 객체에 필요한 프로퍼티와 메서드를 직접 정의할 수도 있다.

---

1. 생성자 함수

생성자 함수는 말 그대로 자바스크립트 커스텀 객체를 생성하는 역할을 한다.

형식이 정해져 있는 것이 아니라, 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.

// Blog 생성자 함수 생성
function Blog(name, age, job) {
     this.name = name;
     this.age = age;
     this.job = job;
     this.sayName = function() {
          console.log(this.name);
};
 
var blog1 = new Blog('Oppa'  , 25 , 'Programmer');
var blog2 = new Blog('Coding', 22 , 'Doctor');

• 명시적으로 객체를 생성하지 않는다.
• 프로퍼티와 메서드는 this 객체에 직접적으로 할당된다.
• return문이 없다.

- 생성과정

새 인스턴스를 만들 때는 new 연산자를 사용한다.

new 연산자와 함께 호출한 함수는 생성자처럼 동작하며, 내부적으로는

1. 새 객체를 생성
2. 생성자의 this 값에 새 겍체를 할당
3. 새 객체의 [[Prototype]]은 자신을 생성한 함수의 prototype 프로퍼티를 참조
4. 생성자 함수 내부 코드 실행(프로퍼티, 메서드 추가)
5. this로 바인딩 된 새 객체를 반환

위 순서대로 동작한다.

console.log(blog1.constructor == Blog);   // true
console.log(blog2.constructor == Blog);   // true
 
//여기서 객체는 모두 Object의 인스턴스인 동시에 Blog의 인스턴스이기도 하다.
console.log(blog1 instanceof Object);    // true
console.log(blog1 instanceof Blog);      // true
console.log(blog2 instanceof Object);    // true
console.log(blog2 instanceof Blog);      // true

자바스크립트 객체는 자신을 생성한 생성자 함수의 protytype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 설정한다.

 

- 객체 리터럴 방식과 생성자 함수의 객체 생성 방식 차이

객체 리터럴 방식과 생성자 함수 방식의 차이는 프로토타입 객체(=부모 객체)에 있다.

• 객체 리터럴 방식의 경우 자신의 프로토타입 객체가 Object.prototype이다.
• 생성자 함수 방식의 경우는 Blog.prototype이다.

이렇게 차이가 발생하는 이유는 자바스크립트 객체 생성 규칙 때문이다.

자바스크립트 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 설정한다.

• 객체 리터럴 방식의 경우 객체 생성자 함수는 Object()이며,
• 생성자 함수 방식의 경우는 생성자 함수 자체(ex Blog)이다.

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.