JavaScript

[DeepDive] - 17장(생성자 함수에 의한 객체 생성) 필요 내용 정리

생성자 함수

  • 생성자 함수: new 연산자와 함께 호출하여 객체를 생성하는 함수
  • 인스턴스: 생성자 함수를 통해 생성된 객체
  • 생성자 함수에 의핸 객체 생성은 프로퍼티 구조가 동일한 객체 어려개를 간편하게 생성할 수 있다.
  • 자바스크립트는 Object, String, Number, Boolean, Function, Array, Date 등의 빌트인 생성자 함수들을 제공하고 있다.
// 생성자 함수 선언
const Person = function(name,gender){
  this.name = name;
  this.gender = gender;
}

// 생성자 함수를 통한 객체(인스턴스) 생성
const person1 = new Person("wayne","male")
// Person {
//   name: 'wayne',
//   gender: 'male',
//   __proto__: { constructor: ƒ Person() }
// }
console.log(person1)

 

생성자 함수의 인스턴스 생성 과정

  • 생성자 함수는 프로퍼티 구조가 동일한 인스턴스를 생성하기 위해, 인스턴스 생성(필수) -> 생성된 인스턴스 초기화(옵션) -> 인스턴스 반환 단계로 동작한다.
  • 생성자 함수 내부에서 다른 객체를 리턴할 경우, this가 반환되지 못하고 리턴하고자 하는 다른 객체가 반환이 된다.
  • 객체와 다르게, 원시형 타입의 데이터를 생성자 함수 내부에서 리턴해주고자 할 경우 원시형 타입 데이터는 무시되고 this가 반환된다.
const Person = function(name,gender){
//   1. 암묵적으로 빈 객체 생성, 생성된 빈 객체는 this에 바인딩
//    Person {
//   __proto__: { constructor: ƒ Person() }
// }
  console.log(this)

//   2. this에 바인딩되어 있는 인스턴스를 초기화(바인딩된 인스턴스에 프로퍼티나 메서드를 추가, 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화 or 고정값 할당)
  this.name = name;
  this.gender = gender;
  this.sayHello = function() {
    console.log(`hi i'm ${this.name}`)
  }

//  3. 생성자 함수 내부 모든 처리가 완료될 시, 인스턴스가 바인딩된 this가 암묵적으로 리턴
}

// 인스턴스 생성
const person1 = new Person("wayne","male")
// Person {
//   name: 'wayne',
//   gender: 'male',
//   sayHello: ƒ (),
//   __proto__: { constructor: ƒ Person() }
// }
console.log(person1)

 

내부 메서드 Call, Construct

  • 함수가 일반 함수로서 호출되면 함수 객체의 내부 메서드 Call이 호출되고, new 연산자와 함께 생성자 함수로서 호출되면 내부 매서드 Construct가 호출된다. (내부 메서드 Call을 갖는 함수 객체를 callable, 내부 메서드 Construct를 갖는 함수 객체를 constructor, Construct를 갖지 않는 함수 객체를 non-constructor라고 부른다.)
  • 모든 함수 객체는 내부 메서드 Call을 갖고 있다. 즉 함수 객체는 callable이면서 constructor / non-constructor를 옵션으로 갖게 된다.

 

constructor, non-constructor의 구분

  • 자바스크립트는 함수 정의 방식에 따라 constructor, non-constructor를 구분하게 된다. 즉, 해당 함수가 생성자 함수로서 사용이 될 수 있는지에 대한 판단을 하는것이다.
    • constructor: 함수 선언문, 함수 표현식, 클래스
    • non-constructor: 메서드(ES6 메서드 축약 표현), 화살표 함수
// 함수 선언문
function declare(){};

// 함수 표현식
const expression = function (){};

// 일반 함수 객체 내부 할당
const object = {
  object_declare: function(){
  }
}

// 화살표 함수
const arrow = () => {}

// ES6 메서드 축약표현
const object2 = {
  object_shorthand() {
    }
}

// foo { __proto__: { constructor: ƒ foo() } }
new declare()

// bar { __proto__: { constructor: ƒ bar() } }
new expression()

// x { __proto__: { constructor: ƒ x() } }
new object.object_declare()

// TypeError: arrow is not a constructor
new arrow()


// TypeError: object2.object_shorthand is not a constructor
new object2.object_shorthand()