JS 객체지향 프로그래밍 클라스 오지고 지렸다 Part 1 - 클래스와 인스턴스 사용법

이예빈·2022년 7월 22일
0

JavaScript

목록 보기
13/26
post-thumbnail

객체지향 프로그래밍(OOP)


객체지향 프로그래밍(Object Oriented Programming)은 하나의 프로그램 설계 철학으로, 모든 것이 객체로 그룹화되는 방식이다. 객체 내에는 '데이터와 기능이 함께 있다'는 원칙에 따라 메서드속성이 존재한다.

OOP는 데이터가 객체 내에 캡슐화되고 구성 요소 부분이 아닌 객체 자체가 운용되는 프로그래밍 방식이다.
OOP를 지원하는 언어는 클래스프로토타입의 형태로 코드의 재사용과 확장성을 위해 상속을 사용한다.


클래스와 인스턴스


클래스는 일종의 원형(original form, template)으로 세부 사항(속성)이 들어가지 않은 붕어빵 틀이라고 할 수 있다. 클래스에 팥, 슈크림 같은 속성을 넣으면 그것이 붕어빵, 즉 객체(인스턴스)가 되는 것이다. JavaScript에서 클래스를 통해 만들어진 객체는 인스턴스라고 부른다.

클래스에 속성을 넣는 역할을 하는 것은 생성자이다. 붕어빵에 팥이나 슈크림 같은 속성을 넣을 수 있고, 팥을 열라 뜨겁게 만들어 먹는이의 혓바닥을 데이게 하는 기능을 넣을 수도 있다.

이때 속성은 property, attribute라고도 부를 수 있고, 기능은 method라고 부른다. method는 객체내에서 정의된 함수를 말한다.


생성자


클래스를 정의하기 위해서 사용하는 생성자 문법에는 크게 두 가지가 있다.
ECMAScript5(ES5)의 문법이 있고, 최근 주로 사용되는 ES6의 문법이 있다.

  1. ES5 : 함수의 형태로 정의
function Bungeoppang(ingredient, size, price){
	this.ingredient = ingredient;
  	this.size = size;
  	this.price = price;
}

생성자에서 사용되는 this는 인스턴스 객체를 의미한다.

  1. ES6 : class 문법으로 정의
class Bungeoppang {
	constructor(ingredient, size, price) {
    	this.ingredient = ingredient;
      	this.size = size;
      	this.price = price;
    }
}

메서드 정의


클래스의 메서드를 정의하는 방식은 다음과 같다.

  1. ES5 : prototype 키워드 사용
function Bungeoppang(ingredient, size, price){
	대충 this.어쩌구 저쩌구
}
Bungeoppang.prototype.makeEmBurn() {
	// 지옥에서 온 붕어빵으로 인간을 괴롭힐 코드
}

prototype은 붕어빵 틀, 원형 객체(original form)을 말한다.


  1. ES6 : 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의
class Bungeoppang {
	constructor(ingredient, size, price) {
    	this.웅앵
    }
  	makeEmBurn() { 
      	// 코드
    }
}

constructor는 인스턴스를 초기화할 때 실행


인스턴스에서 사용


붕어빵 만들기

let pizzaBung = new Bungeoppang('cheese', 'large', '1000');
// 대왕 피자 붕어빵 생성
pizzaBung.ingredient; // 재료는 'cheese'
pizzaBung.makeEmBurn(); // 인간 공격

새로운 인스턴스를 생성할 때는 new 키워드를 사용한다.


참고


MDN - OOP https://developer.mozilla.org/ko/docs/Glossary/OOP
Wikipedia - OOP https://en.wikipedia.org/wiki/Object-oriented_programming
드림코딩 YouTube https://www.youtube.com/watch?v=_DLhUBWsRtw&t=1104s
코드스테이츠 교육과정

profile
temporary potato

0개의 댓글