🌊 [javascript] 클래스와 인스턴스

🌊 클래스와 인스턴스

객체지향 프로그래밍

하나의 모델이 되는 청사진을 만들고 → class

그 청사진을 바탕으로 한 객체를 만드는 → instance 프로그래밍 패턴

// class
function Fishbread(ingredients) {} 

// instance

let shouboong = new Fishbread('puff');
let redbeanboong = new Fishbread('redbean');

새로운 인스턴스를 생성할 때 new 키워드를 사용하여 만든다.

 

ES5와 ES6의 생성자 함수

• 생성자 함수는 return 값을 만들지 않는다.
• 최근에는 ES6 방식을 주로 사용한다.

// 💡 ES5
function Fishbread(ingredient, time){
    // 인스턴스가 만들어질 때 실행하는 코드
}

// 💡 ES6
class Fishbread {
    constructor(ingredient, time){
        // 인스턴스가 만들어질 때 실행되는 코드
    }
}

 

 

인스턴스 생성

: new 키워드르 통해 클래스와 인스턴스를 만들어낼 수 있다. 

각각의 인스턴스는 Fishbread(붕어빵..)라는 클래스의 고유한 속성과 메소드를 가진다.

let shouboong = new Fishbread('puff', '5');
let redbeanboong = new Fishbread('redbean', '7');
let pizzaboong = new Fishbread('pizza', '6');

 

클래스 속성의 정의

: this는 인스턴스 객체를 의미한다. 매개변수로 넘어온 ingredient, time은 인스턴스 생성시 지정되는 값.

this에 할당한다는 것은 만들어진 인스턴스에 해당 매개변수를 부여하겠다는 의미이다. 

// 💡 ES5
function Fishbread(ingredient, time){
    this.ingredient = ingredient;
    this.time = time;
}

// 💡 ES6
class Fishbread {
    constructor(ingredient, time){
        this.ingredient = ingredient;
        this.time = time;
    }
}

 

클래스: 메소드의 정의

: ES5에선 prototype 키워드를 사용해야 메서드를 정의할 수 있었으나 ES6에선 생성자 함수와 함께 class 키워드 안 쪽에 묶어서 정의한다.

 

// 💡 ES5
function Fishbread(ingredient, time){ }

Fishbread.prototype.bake = function() {
    // 붕어빵을 굽기
   
}

// 💡 ES6
class Fishbread {
    constructor(ingredient, time){}
     bake(){ 
     // 붕어빵을 굽기
     }
    
}

 

클래스

: class는 함수이자 값으로 사용할 수 있는 일급 객체로 다음과 같은 특징을 가진다.

• 무명의 리터럴로 생성할 수 있다. 즉, 런타임 생성 가능
• 변수나 객체 배열 등에 저장할 수 있다.
• 함수의 매개변수에게 전달할 수 있다.
• 함수의 반환값으로 사용 가능하다.

// 익명 클래스 표현식
const Fruits = class{};

// 기명 클래스 표현식
const Fruits = class MyFruits{};

// 일반 함수와 구별하기 위해 첫 글자를 대문자로 작성

 

클래스와 생성자 함수의 차이

: 생성자 함수와 클래스는 프로토타입 기반의 객체지향을 구현했다는 점에서 매우 유사하다.

class	생성자 함수
new 연산자 없이 호출 → 에러 발생	new 연산자 없이 호출 → 일반 함수로서 호출
상속을 지원하는 extends와 super 키워드 제공	extends와 super 키워드 미제공
호이스팅 발생 ❌	함수 선언문 → 함수 호이스팅 발생 함수 선언식 → 변수 호이스팅 발생
암묵적 stric mode ⭕️	stric mode ❌
constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다. 열거되지 않는다.