객체지향 프로그래밍
하나의 모델이 되는 청사진(blueprint)를 만들고 , → 클래스(class)
그 청사진을 바탕으로 한 객체를 찍어내는 프로그래밍 패턴 → 인스턴스(instance)
클래스를 만드는 최근에 ES6에 도입되었습니다. 클래스는 constructor를 품고 있습니다
class Car {
constructor(brand, name, color){
//인스턴스가 만들어질 때 실행되는 코드
}
}
속성과 메소드
클래스에 속성과 메소드를 정의하고, 인스턴스에서 그것을 사용합니다
▶ 클래스: 속성의 정의
- ES5 에서는 class 와 constructor 대신 그냥 function 을 사용했다
- ES6 에서는 class 와 constructor 를 사용한다
//ES5
function Car(brand, name, color){
this.brand = brand;
this.name = name;
this.color = color;
}
//ES6
class Car{
constructor(brand, name, color){
this.brand = brand;
this.name = name;
this.color = color;
}
}
▶ 클래스: 메소드의 정의
- ES5 에서는 함수를 호출할때 prototype 이라는 키워드를 사용해야 한다
- ES6 에서는 함수를 그냥 호출한다
//ES5
function Car(brand, name, color) { /* 속성생략 */}
Car.prototype.refuel = function(){
//연료 공급을 구현하는 코드 쓸거임
}
Car.prototype.drive = function(){
//운전을 구현하는 코드 쓸거임
}
//ES6
class Car{
constructor(brand, name, color) { /* 속성생략 */}
refuel(){
//연료 공급을 구현하는 코드 쓸거임
}
drive(){
//운전을 구현하는 코드 쓸거임
}
}
▶ 인스턴스에서의 사용
방금 클래스에서 설정한 속성과 메소드를 어떻게 인스턴스에서 사용할까요?
let avante = new Car('hyundai', 'avante', 'black');
avante.color; // 'black'
avante.drive(); // 아반떼가 운전을 시작합니다
let mini = new Car('bmw', 'mini', 'white');
mini.brand; // 'bmw'
mini.refuel(); // 미니에 연료를 공급합니다
'Javascript' 카테고리의 다른 글
prototype (= 부모유전자, 물려받아 쓸 수 있음) (0) | 2023.03.15 |
---|---|
OOP 4가지 개념 (0) | 2023.03.15 |
배열 반복문 3인방 ( filter(), map(), reduce() ) (0) | 2023.03.14 |
bind(= this 값을 고정시키는 명령) (0) | 2023.03.12 |
call (=this 값을 바꾸는 명령) (0) | 2023.03.12 |