[JS] 생성자 함수

Minyoung's Conference·2022년 10월 19일
0

JavaScript

목록 보기
23/28
post-thumbnail
객체공장장, new 연산자와 함수
생성자란 앞에 new 연산자가 붙은 함수를 의미하며 인스턴스를 만들 수 있다. 
new Object(), new Array()와 같은 JS 기본 내장 생성자 함수도 있지만 
사용자가 직접 새로운 타입을 만들 수도 있다.

function MyOwn(){} // 생성자 함수 (생성자함수는 대문자로 만들기로 약속!)
var myObj = new MyOwn();
(인스턴스)     (생성자) 

생성자와 인스턴스의 관계는 instanceof와 constructor 메소드를 통해 확인할 수 있다.

function MyOwn(){}

var myObj = new MyOwn();

console.log(myObj instanceof MyOwn); // true
console.log(myObj.constructor === MyOwn); // true

**생성자를 만드는 이유는 뭘까?
생성자의 중요한 기능은 바로 동일한 프로퍼티와 메소드를 가진 객체를 쉽게 대량생산 하는데 있다.**

function Food(taste){
  this.taste = taste;
  this.smell = function () {
    console.log(this.taste + "맛이 난다!");
  }
}

let pasta = new Food("로제파스타");

pasta.smell(); //"로제파스타맛이 난다!"

이처럼, pasta는 Food 타입을 참조하는 인스턴스이다. 여러 개를 만들면 된다.
let cheeseburger = new Food("유기농 소의 치즈") 
let chilantro = new Food("고수") 

cheeseburger.smell(); // "유기농 소의 치즈맛이난다!"
chilantro.smell(); // "고수 맛이 난다!"

생성자의 new 연산자는 매우 중요하다.

**new 연산자가 붙으면 함수의 this는 인스턴스를 참조하게 되며, new 연산자가 
자동으로 인스턴스를 반환하기 때문에 함수안에 return 연산자도 필요없어지게 된다.
(원래 함수안의 this는 함수를 호출하는 객체를 참조)**

function Food(taste){
    console.log(this);
  this.taste = taste;
  this.smell = function () {
    console.log(this.taste + "맛이 난다!");
  }
}

let pasta = new Food("로제파스타"); // Food {}
let tomato = Food("토마토"); // Window {window: Window ...}

Food내의 콘솔의 thisnew 연산자가 있으면 Food 함수를 가르키고,
new 연산자가 없으면 Window 객체를 가리킨다.

만약 생성자 함수에 new 연산자가 없으면 생성자 함수는 단순히 평범한 함수이고,
this는 전역객체를 가리키게 된다.

[정리]
- 생성자란 앞에 new 키워드가 붙는 함수를 의미
- 생성자의 중요 기능은 동일한 프로퍼티와 메소드를 가진 객체를 쉽게 대량생산하는데 의의
- 생성자 함수의 new 연산자는 인스턴스를 참조

(인프런 "코딩인터뷰를 저격하는 JS 스나이퍼 양성학교" 참고)

추가내용

객체 내 프로퍼티에 함수가 할당되어져 있다면, 그것은 더 이상 속성이 아니라 메소드 이다. (객체 내의 속성과 메소드를 통틀어서 member라고도 한다.)

만약 bradley라는 객체와 같이 amy라는 객체 데이터가 존재한다고 해보자.

amy라는 객체 데이터는 프로퍼티가 같고, 속성과 키의 타입도 같다.
또한 메소드의 로직 또한 같다.
알다시피, 반복되는 내용은 효율을 떨어트리고 메모리 낭비가 된다.

이 내용들을 자바스크립트 클래스로 정리를 해보자.

function User(first, last) {
  this.firstName = first;
  this.lastName = last;
}

const bradley = new User("minyoung", "kim");

console.log(bradley);

//user {firstName: "minyoung", lastName: "kim", constructor: Object}

new라는 키워드를 통해서 User라는 함수를 실행했고 이 때 실행한
User라는 함수를 생성자 함수라고 한다. 생성자 함수는 하나의 객체 데이터를 생성한다.

그러면 amy와 같은 새로운 객체 데이터를 손쉽게 추가할 수 있다.

function User(first, last) {
  this.firstName = first;
  this.lastName = last;
  this.getFullName = function(){
    return `${this.firstName} ${this.lastName}`;
  }
}

const bradley = new User("minyoung", "kim");
const rachael = new User("Kayeon", "Kim");
console.log(bradley);
console.log(Rachael);

//user {firstName: "Kayeon", lastName: "Kim", getFullName: ƒ (), constructor: Object}

new라는 키워드를 통해서 생성자함수로 실행한 결과를 반환해서 할당된 변수를 '인스턴스'라고 한다.
(instance : bradley, rachael )

profile
안녕하세요, FE 개발자 김민영입니다.

0개의 댓글