[Java Script] 객체지향 프로그래밍 (클래스와 인스턴스)

코딩

Frontend 2022. 5. 25. 21:32

키워드 : 클래스, 인스턴스, new 키워드, 생성자 함수, 클래스 작성 문법(ES5, ES6), 속성, 메소드

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

. 데이터와 기능을 한 곳에 묶어서 처리하는 방식.

. 속성과 메서드가 하나의 ‘객체'라는 개념에 포함.

클래스(class) = 세부 사항(속성)이 들어가지 않은 청사진. 일종의 원형틀이라고 생각하면 된다.
- 보통 대문자로 시작, 일반 명사로 만든다.
- 클래스를 만드는 문법 (2가지)

ES5	ES6
함수로 정의 가능	class 키워드로 정의 가능
function Car(brand, name, color) { this.brand = brand; this.name = name; this.color = color; }	class Car { constructor(brand, name, color){ this.brand = brand; this.name = name; this.color = color; } }

인스턴스 객체(instances object) = 청사진을 바탕으로 속성이 추가되어 만들어지는 객체. 원형틀에 넣어서 찍어만든 물체라고 생각하면 된다.
- 일반적인 함수를 정의하듯 생성.
- new 키워드를 사용해서 생성 → 이 때 생성자 함수가 실행된다.
  - 예시 : let avante = new Car (’hyundai’, ‘avante’, ‘black’);
- 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖는다.
생성자 함수: 인스턴스 생성 시 세부 사항(속성)을 넣을 수 있도록 실행되는 코드. 인스턴스가 초기화될 때 실행하는 함수.
속성 및 메서드
- 클래스에 속성과 메서드가 정의되며, 인스턴스에서 이용한다.
- 메서드 : 일종의 객체에 딸린 함수.
ES5 ES6

방식 prototype을 이용해야 정의 가능 생성자 함수와 함께 class 키워드 안쪽에서 정의

형태(예시) Car.prototype.refuel = function(){} refuel(){}
- prototype : 원형 객체(original form)을 의미.
this : 인스턴스 객체를 의미. 함수가 실행될 때 해당 스코프에서의 객체를 가리킴.

	ES5	ES6
방식	prototype을 이용해야 정의 가능	생성자 함수와 함께 class 키워드 안쪽에서 정의
형태(예시)	Car.prototype.refuel = function(){}	refuel(){}