클래스와 인스턴스

여동희·2023년 1월 13일
0
post-custom-banner

객체 지향 프로그래밍

하나의 모델이 되는 청사진 → class 을 만들고,
그 청사진을 바탕으로 한 객체 → instance 를 만드는 프로그래밍 패턴.

클래스(class)

클래스는 객체 지향 프로그래밍에서 특정 객체(인스턴스)를 생성하기 위해 변수와 메소드를 정의하는 일종의 청사진

인스턴스(instance)

클래스를 바탕으로 한 객체

  • 일반 객체 object 와 구분하기 위하여 instance 라 정의한다.

클래스를 만드는법

생성자 함수(ES5 클래스 작성 문법)사용

// Player 라는 class를 함수로 정의하였을 때

function Player(name){
	this.name = name; // 인스턴스(클래스를 바탕으로 한 객체)가 만들어질 때 실행되는 코드.

   this.notice = function(name){
       alert(this.name);
   }
}

class 키워드(ES6 문법) 사용

// class 키워드를 이용하며, constructor(생성자함수)를 사용한다.

class Player{
	constructor(name){
    	this.name = name; // 인스턴스(클래스를 바탕으로 한 객체)가 만들어질 때 실행되는 코드.
    }
    notice(){
		alert(this.name);
    }
}

new 키워드

new 연산자를 이용해 위에서 만든 클래스의 인스턴스를 만들 수 있다.

let pro = new Player('Caps') 
// pro라는 인스턴스에 들어있는 name이라는 속성에 Caps라는 값을 할당하기

코드 실행 결과

이 두 코드의 실행을 통해 아래와 같은 결과가 나온다.

consol.log(pro.name) // Caps

pro.notice(); // alert가 발생 'Caps'가 출력
// notice()가 메서드

코드 실행을 통해 변수에 클래스의 설계를 가진 새로운 객체(인스턴스)가 할당 됨을 알 수 있다.
이렇게 만들어진 각각의 인스턴스는 클래스의 고유한 속성메서드를 갖는다.


클래스의 속성과 메서드

function Player(name){
	this.name = name; //속성

   this.notice = function(name){//메서드
       alert(this.name);
   }
}

class Player{
	constructor(name){
    	this.name = name;//속성

    }
    notice(){
		alert(this.name);//메서드
    }
}

this.name=name => this(만들어진 인스턴스에) name이라는 속성을 부여함
this → 인스턴스 객체
메서드 → 객체에 딸린 함수 → 예시) notice(){}

실습 예제

class Car {
  constructor(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
  drive() {
    console.log(this.brand + '에서 만든 ' + this.color + '컬러의 ' + this.name + '가 운전을 시작합니다');
  }
}

let avante = new Car('현대', '아반떼', '화이트');
let ionic = new Car('현대', '아이오닉', '블랙');
let kona = new Car('현대', '코나', '레드');

console.log(avante.color); // '화이트'
console.log(kona.brand); // '현대'
console.log(ionic.drive()); // '현대에서 만든 블랙컬러의 아이오닉가 운전을 시작합니다'
profile
프론트엔드 개발자 준비생
post-custom-banner

0개의 댓글