(Daliy / TIL 02.26) 객체 지향 프로그래밍 OOP

Seung Ho Yoon·2021년 3월 1일
0

Object Oriented Programming

즉, 객체 지향 프로그래밍은 무엇일까? 🧑‍💻

기존의 절차적언어의 순차적인 명령에 비효율을 개선하고자 만든 방법론이다.
말그대로 모든것을 객체로 활용한다.

클래스라고 부르는 데이터 모델의 청사진(blueprint)를 만들고 만든 청사진을 바탕으로 만들어진 객체(instance)들 즉 인스턴스를 만들어 효율적이게 프로그래밍 한다.

클래스를 선언하는 방법을 알아보자.

class 안에는 클래스의 속성 (field)과 행동 (method)이 들어갈수있다.
클래스의 이름은 보통 일반 함수와 구별하기 위해 대문자로 시작한다.
속성과 메소드는 현실세계를 바탕으로 작성된다!


es5

function Car (brand, name, color) {
  this.brand = brand;
  this.name = name;
  this.color = color;
  // => 속성 (field)
  
  Car.prototype.ride = function() {  //=> portotype객체 속성과 메소드를 적을수있다.
    return console.log(`${this.name}를 탑니다.`)
  }
  // => 행동 (method)
}

es6

class Car {
  
  constructor(brand, name, color){
    //constructor는 생성자 함수 입니다. 
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
  
  ride() {
    return console.log(`${this.name}를 탑니다.`)
  }

인스턴스 생성과 getter / setter

class를 생성했으니 클래스를 반영하는 인스터스 즉, 하위객체를 만들어보자.
인스턴스를 생성할떄는 new라는 키워드를 사용한다.

let mini = new Car ('bmw','mini','white')
mini.color; => white
mini.ride(); => mini를 탑니다.

인스턴스가 생성될때 말이되지 않은 파라미터가 들어오는걸 방어적인 자세로 만들수 있다. get 이라는 키워드를 사용해서 값을 리턴하고 set 이라는 키워드로 값을 가져올수 있고 파라미터는 value값을 받아야 한다.

get color () {
	retutn this._color;
}

set color (value) {
  	if (typeof value !== 'string') {
        throw Error ('색을 문자로 넣어주세요.');
	} // => 문자열이 안 들어오면 에러 메세지를 출력한다. 
  
  	this._color = value;
}

텍스트객체 지향 프로그래밍은 4가지 개념을 가진다. 캡슐화, 상속, 추상화, 다형성
그 4가지 개념에 대해 알아보자.

  • 캡슐화

    데이터와 기능을 하나의 단위로 묶는것이다.
    구현은 숨기고, 동작은 노출시키고 느슨한 결합형태를 가지고 있다
    디테일한 구현이나 데이터는 숨기고 동작만 노출시켜야 된다.
    코드를 복잡하게 않게 만들고, 재사용성을 높인다.

  • 추상화

    내부구현은 복잡하게 만들고 노출되는 부분은 단순명로하게 만든다. 그러면 내부 는 복잡하지만 인터페이스가 간단하다. 클래스를 사용하는 사람이 필요하지 않 은 메소드를 노출시키지 않는다.

  • 상속과 다형성

    부모 클래스를 상속해 속성과 메소드를 상속 받을 수 있다. 정확히 말하면 기본 클래스의 특징을 파생 클래스가 상속 받는다.
    또 부모 클래스와 다르게 메소드르 새로 다시 정의 할수 있다 이것을 overiding이라고 한다.

Car라는 클래스를 이어받은 SportCar 라는 클래스를 생성하는법을 알아보자.

class SportCar extends Car { <= 상속
  
  ride () {
    super.ride(); => 부모의 메소드를 가져온다 즉, 같이 출력된다. 
    return console.log(`${this.name}가 미치게 달립니다.`)
  } => 필요한 함수들을 오버라이딩해서 다시 쓸수 있다. 
}


profile
Frontend Developer

0개의 댓글