생성자 함수에 의한 객체 생성

hoonnotes

생성자 함수란?

  • 지정한 타입의 인스턴스를 만들어주는 함수
  • 인스턴스: 설정된 모양으로 생성된 데이터 실체
  • 객체 인스턴스: 객체 모양의 데이터 구조로 생성된 데이터

Object 생성자 함수

// 빈 객체 생성
const person = new Object();

// 객체에 name 프로퍼티 설정
person.name = "Hoon";

// 객체에 sayHello 메서드 설정
person.sayHello = function () {
  console.log(`Sup, it's yo homie ${this.name}`);
};

console.log(person.name);
person.sayHello();

왜 생성자 함수를 사용하나요?

const person1 = {
  firstName: 'Hoon',
  lastName: 'Oh',

  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

console.log(person1.getFullName())

const person2 = {
  firstName: 'Jimmie',
  lastName: 'Carter',

  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

console.log(person2.getFullName())

왜 생성자 함수를 사용하나요?

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = function () {
    return `${this.firstName} ${this.lastName}`;
  };
}


const person1 = new Person('Hoon', 'Oh')
const person2 = new Person('Jimmie', 'Carter')

console.log(person1.getFullName())
console.log(person2.getFullName())

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

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = function () {
    return `${this.firstName} ${this.lastName}`;
  };
}

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

function Person(firstName, lastName) {
  console.log(this); // Person {}
  
  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = function () {
    return `${this.firstName} ${this.lastName}`;
  };
}

const person1 = new Person("Hoon", "Oh");

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

function Person(firstName, lastName) {
  console.log(this); // Person {}

  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = function () {
    return `${this.firstName} ${this.lastName}`;
  };
  console.log(this); 
  /**
   * Person {
      firstName: 'Hoon',
      lastName: 'Oh',
      getFullName: [Function (anonymous)]
    }
   */
}

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

function Person(firstName, lastName) {
  console.log(this); // Person {}

  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = function () {
    return `${this.firstName} ${this.lastName}`;
  };
  console.log(this);
  /**
   * Person {
      firstName: 'Hoon',
      lastName: 'Oh',
      getFullName: [Function (anonymous)]
    }
   */
}

const person1 = new Person("Hoon", "Oh");
console.log(person1);
  /**
   * Person {
      firstName: 'Hoon',
      lastName: 'Oh',
      getFullName: [Function (anonymous)]
    }
   */

함수는 객체이다 !

function sayHi() {}

sayHi.name = 'Hoon';

sayHi.method = function() {
  console.log(`Hi! I'm ${this.name}`)
}

sayHi.method()

sayHi는 함수이지만, 일반 객체처럼 사용 가능!

함수는 객체이다 !

함수와 객체의 가장 큰 차이점 

함수는 ( )를 사용하여 호출할 수 있다

 

  • Environment
  • FormalParameter
  • Call
  • Constructor

함수는 객체이다 !

callable: 내부 메서드 [[call]] 이 있는 객체는 호출이 가능

constructor: 내부 메서드 [[construct]]가 있는 객체는 생성자로 활용 가능

function sayHi() {}

// 함수를 호출하면 [[Call]]이 호출된다
sayHi()

// 함수를 생성자 함수로 사용하면 [[Construct]]가 호출된다
new sayHi()

(non) constructor

자바스크립트가 constructor 함수를 구분하는 방법:

 

  • constructor: 함수 선언문, 함수 표현식, 클래스로 정의
  • non-constructor: 메서드, 화살표 함수로 정의
// 일반 함수 정의: 함수 선언문과 함수 표현식
function first() {}

const second = function () {};

const myObject = {
  // 프로퍼티 third에 할당된 함수로, 일반 함수로 정의된 함수
  third: function () {},
};

new first(); // first {}
new second(); // second {}
new myObject.third(); // third {}

const arrow = () => {} 
new arrow() // TypeError! not a constructor

const secondObject = {
  method() {}
}
new secondObject.method() // TypeError! not a constructor

new 연산자

자바스크립트가 생성자 함수를 실행하는 방법!

 

  • 일반 함수를 사용하듯 사용하면 call 함수 실행
  • new 키워드를 함께 사용하면 construct 함수 실행
function createUser(name, role) {
  return { name, role };
}

const employee = new createUser('Hoon', 'Marketing Manager');
console.log(employee); 
// { name: "Hoon", role: "Marketing Manager" }

new 연산자

따라서 파스칼 케이스 함수도,
new 키워드가 없으면 일반함수로 실행된다!

function User(name, role) {
  this.name = name;
  this.role = role;
}

const employee1 = User('Hoon', 'Marketing Manager');
console.log(employee1); // undefined

const employee2 = new User('Hoon', 'Server Engineer');
console.log(employee2); 
// User { name: 'Hoon', role: 'Server Engineer' }

new.target

생성자 함수가 생성자 함수로 실행될 수 있게 해주는 방법

 

파스칼 케이스로 작성

new.target을 사용!

new.target

메타 프로퍼티

컨스트럭터 함수 내부에서 this처럼 사용된다 

new 키워드로 실행되지 않으면, undefined값 할당

function Circle(radius) {
  // 생성자로 호출되지 않았다면 new.target 값은 undefined로 설정된다
  if (!new.target) {
    return new Circle(radius);
  }

  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

const circle = Circle(5); // new 키워드가 없어도 생성자로 생성이 가능하다!

07. 생성자 함수에 의한 객체 생성

By hoonnotes

Made with Slides.com

07. 생성자 함수에 의한 객체 생성

  • 62

More from hoonnotes