[JS] 생성자함수, 클래스, 인스턴스

생성자함수와 클래스는 비슷한 개념이지만

클래스는 ECMAScript 2015 이후 버전에서만 사용할수있다.

 

생성자 함수 : 객체의 틀을 만들때 함수를 사용하는 함수

인스턴스, 인스턴스객체: 생성자 함수를 사용해서 찍어내는 객체 

 

생성자함수

- 인스턴스 객체를 만들어내는 함수

-함수 내부에서 this를 사용한다.

-생성자 함수 이름의 첫 글자는 항상 영문자의 대문자로 쓴다

 

function Book(title, pages, done = false){
  this.title = title;
  this.pages = pages;
  this.finish = function(){
    let str = "";
    this.done === false ? str = "읽는중": str = "완독";
    return str;
  }
}

 

여기서 Book이 생성자함수이다.

title, pages, done은 매개변수이다.

 

 

생성자함수는 아직 객체가 아니고 그냥 틀이다. 붕어빵틀같은 그냥 틀!

이 틀(생성자함수)를 이용해서 객체를 찍어내려면 new 라는 예약어를 사용한다.

new를 사용해서 인스턴스를 만든다.

 

let book1 = new Book("웹 표준의 정석", 645, false);


// Book은 생성자함수
// book1은 인스턴스

 

 

<클래스>

자바스크립트의 클래스는 다른 프로그래밍 언어의 클래스와 동작 방법이 다르다.

자바스크립트의 클래스는 정확한 클래스 개념이 아니라 생성자 함수를 좀 더 표현하기 쉽게 바꾼 신택틱 슈거(syntactic sugar)이다.

클래스를 사용해 소스를 작성해도 실제로 내부에서는 이전의 생성자 함수로 바꾸어서 해석한다.

 

클래스를 만들때는 class 예약어 다음에 클래스명을 작성한다.

constructor() 함수의 안에는 프로퍼티를 넣고 밖에는 메서드를 정의한다.

프로퍼티를 나열할때는 프로퍼티 간에 쉽표로 구분하지만, 메서드를 나열할때는 메서드와 메서드 사이에 쉼표가 없다.

class 클래스명{
  constructor(){
    프로퍼티1,
    프로퍼티2,
  }
  메서드1(){...}
  메서드2(){...}
}

 

class Book2 {
  constructor(title, pages, done){
    this.title = title;
    this.pages = pages;
    this.done = done;
  }
  finish(){
    let str = "";
    this.done === false ? str = "읽는 중" : str = "완독";
    return str;
  }
}

 

 

근데 클래스와 생성자함수 차이가 뭘까?

난이렇게 정리했따!

클래스를 인스턴스화할때 사용하는 메서드가 생성자함수이다.

생성자함수가 constructor이다.