JavaScript_OOP

Adela·2020년 4월 25일
0

JavaScript

목록 보기
8/17
post-thumbnail
post-custom-banner

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

객체를 기반으로한 프로그래밍의 주요 철학, 방법론
사람이 세계를 보고 이해하는 방법을 흉내낸 방법론

모든 것은 object로서 설명이 가능하다.
객체를 하나 만들어두면 색깔, 크기, 이름, 기능, 속성을 조정함에 따라 여러가지를 뽑아낼 수 있다. (재사용성)

class를 바탕으로 instance를 만드는 프로그래밍 패턴
현실세계를 기반으로 프로그래밍 모델을 만들 때 유용한 프로그래밍

클래스 Class

하나의 모델이 되는 틀, 청사진 = 프로그래밍의 class

class 정의 방법

ES5 - 함수

function Car (brand, name, color) {
  //인스턴스를 만들 때 실행되는 코드
  this.brand = brand;   
  this.name = name;
  this.color = color;
}

class정의 ES6 - class 키워드

class Car {
  constructor (brand, name, color){
  	//인스턴스를 만들 때 실행되는 코드
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

인스턴스 Instance

청사진, class를 바탕으로 생성된 객체 = 프로그래밍의 instance

class의 instance 만드는 방법 : new키워드
각각의 instance는 Car라는 class의 고유한 속성과 method를 가진다.

let avante = new Car ('hyundai', 'Avante', 'black');
let mini = new Car ('bmw', 'MINI', 'white');
let beetles = new Car ('volkswagen', 'Beetles', 'red');

prototype : 원형객체

아직 세부사항이 정의되지 않은 청사진
청사진을 가지고 세부사항만 기입해주면 object가 된다.

mdn문서를 보면 객체타입.prototype.메서드라고 되어있는 이유가 메서드가 원형객체에 정의되어 있기 때문임을 알 수 있다.

Car.prototype.drive = function() {
  console.log(this.brand + '출발!!!');
}
// Car가 원형객체

constructor : 생성자

인스턴스화 되는 시점에 호출되는 메서드

instance가 초기화될 때 실행하는 생성자 함수
instance를 처음 만들 때 실행하는 함수이다.

class Car {
  constructor (brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

let mini = new Car ('bmw', 'MINI', 'white');

mini;
// Car {brand: "bmw", name: "MINI", color: "white"}

속성과 method

속성 정의

property :객체의 특성
예) brand, name, color

ES5

function Car (brand, name, color) {
  // 이 부분들이 constructor에 해당한다
  this.brand = brand;   
  this.name = name;
  this.color = color;
}

ES6

class Car {
  constructor (brand, name, color) {
  // Car에 정의되어 있는 brand, name, color속성을 상속한다.
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

method 정의

method : 객체의 능력, 하고자 하는 action
예) currentFuel, maxSpeed..

Car에 정의된 메서드는 Car의 Instance 모두가 갖게 된다.

ES5

function Car (brand, name, color) {
  this.brand = brand;
  this.name = name;
  this.color = color;
}

Car.prototype.refuel = function() {
  // 연료 공급
}
Car.prototype.drive = function() { 
  // 운전
  console.log(this.name + '가 운전을 시작합니다');
}

ES6

class Car {
  constructor (brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color; 
  }
  refuel() {
    // 연료 공급
  }
  drive() {
    // 운전
    console.log(`${this.name}${this.color} ${this.brand} 드림카 운전을 시작합니다 ><`);
  }
}

let myCar = new Car('드림카', 'bbodela', '하얀색');
// bbodela가 하얀색 드림카 운전을 시작합니다 ><

OOP를 사용하는 이유

하나의 정형화된 모델 Prototype이 있고, 그 모델을 기반으로한 비슷한 객체들을 찍어내기 위해 사용된다.
= instance(복제품)을 만들기 위해 사용한다.
instance를 찍어내는 기능은 함수를 이용해서 표현한다.

class의 constructor에서 특성을 정의해주면 된다.

예)

classobjects
blueprint for creating objects
Car
properties/Attribute
color
price
speed

Methods/Behaviours(함수)
start()
Backward()
Forward
Stop()
profile
👩🏼‍💻 SWE (FE)
post-custom-banner

0개의 댓글