객체 지향 자바스크립트
🌻 Object Oriented Programming...!
객체 지향 JavaScript
Achievement Goals
- 객체 지향 프로그래밍의 기본적인 컨셉을 이해할 수 있다.
class,instance등의 용어를 이해할 수 있다.new키워드를 사용해instance를 생성할 수 있다.ES6 class키워드를 사용할 수 있다.
prototype을 이용해 클래스의 원형을 만드는 방법을 이해할 수 있다.
객체 지향 프로그래밍
- 하나의 모델이 되는 청사진(
blueprint)를 만들고(→ class), 그 청사진을 바탕으로 한 객체(object)를 만드는(→ instance) 프로그래밍 패턴
▶︎ ES5 클래스는 함수로 정의할 수 있다.
function Car(brand, name, color) {
// 인스턴스가 만들어질 때 실행되는 코드
}▶︎ ES6 에서는 class라는 키워드를 이용해서 정의할 수도 있다.
class Car {
constructor(brand, name, color) {
// 인스턴스가 만들어질 때 실행되는 코드
}
}▶︎ new 키워드를 통해 클래스의 인스턴스를 만들어낼 수 있다.
let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white');
let betles = new Car('volkswagen', 'beetles', 'red');
-> 각각의 인스턴스는 Car라는 클래스의 고유한 속성과, 메소드를 갖는다속성과 메소드
- 클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용한다.
▶︎ 클래스 : 메소드의 정의
[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(); // 미니에 연료를 공급한다▶︎ prototype & constructor & this
prototype: 모델의 청사진을 만들 때 쓰는 원형 객체(original form)이다.constructor: 인스턴스가 초기화될 때 실행하는 생성자 함수this: 함수가 실행될 때, 해당scope마다 생성되는 고유한 실행context(execution context)new키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로this의 값이 됨
