[코드스테이츠]-객체지향 프로그래밍

오다경·2023년 1월 13일
0

코드스테이츠

목록 보기
7/13
  • 클래스와 인스턴스

    하나의 모델이 되는 청사진을 만들고 ➡️ class
    청사진을 바탕으로 한 객체를 만드는 ➡️ instance
    프로그래밍 패턴

ES6에서는 class라는 키워드를 이용하여 정의할 수 있다.
여기서 보이는 함수는 객체지향 프로그래밍에서 생성자함수라고 부른다.
생성자 함수(constructor)
➡️ 클래스 내에 생성자 함수는 하나만 있을 수 있다.
➡️ 인스턴스 객체(this)를 생성하고 초기화 한다.
➡️ 생성자 함수를 작성하지 않으면 기본 생성자가 제공된다.

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

인스턴스를 만들 때는 new키워드를 사용한다.

let avante = new Car("hyundai", "avante", "black");
let mini = new Car("bmw", "mini", "white");
let beetles = new Car("volkswagen", "beetles", "red");

avante, mini, beetles와 같이 각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메소드를 갖는다.

인스턴스에서의 사용

let avante = new Car("hyundai", "avante", "black");
avante.color;
avante.drive;

✨내가 직접 ES6버전으로 실행시켜보기

💡Car의 속성 : brand, name, color
💡Car의 메소드 : constructor(), drive()
💡console의 결과
black
avante가 운전을 시작합니다.

  • 객체지향 프로그래밍

절차적 언어
-초기의 프로그래밍 언어는 일반적으로 절차적 언어라고 부른다.
-절차적 언어는 순차적인 명령의 조합이다.

객체 지향 언어
-"클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성한다.
-현대의 언어들은 대부분의 객체 지향의 특징을 갖고 있다.

OOP
-oop의 의미 : 사람이 세계를 보고 이해하는 방법을 흉내 낸 방법론
-프로그램 설계 철학 중 하나이다.
-객체로 그룹화 되고 한번 만들고 나면, 메모리 상에서 반환되기 전까지 객체 내의 모든 것이 유지된다. (고유의 데이터가 존재한다)

-캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높인다.
-추상화는 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화에 대한 영향을 최소화한다.
-상속 역시 불필요한 코드를 줄여 재사용성을 높인다.
-다형성으로 인해 동일한 메서드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해진다.

클래스와 인스턴스
클래스에 포함된 세부사항은 속성과 메소드가 있다.
-클래스 : 세부사항(속성)이 들어가지 않는 청사진이다.(세부 사항만 넣는다면 그것은 객체가 된다.)
-인스턴스 : 클래스를 통해 만들어진 객체를 instance object, 줄여서 인스턴스라고 부른다.
-생성자 : 생성자를 통해 세부사항을 넣을 수 있다.

  • 프로토타입(Prototype)

자바스크립트는 프로토타입 기반의 언어이다.

👉 Prototype 이란 무엇일까?
모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 원형 객체라고도 한다.
프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지인데 그것을 프로토타입 체인이라고 부른다.

eg) Human이라는 클래스와 인스턴스, 그리고 프로토타입의 관계

eg) 코드 실행 예제

class Human {
 constructor(name, age) {
   this.name = name;
   this.age = age;
 }

 sleep() {
   console.log(`${this.name}은 잠에 들었습니다`);
 }
}

let kimcoding = new Human('김코딩', 30);

Human.prototype.constructor === Human; // true
Human.prototype === kimcoding.__proto__; //true
Human.prototype.sleep === kimcoding.sleep; //true
  1. Human 클래스의 생성자 함수는 Human이다.
  2. Human 클래스의 프로토타입은 Human 클래스의 인스턴스인 kimcoding의 __proto__이다.
  3. Human 클래스의 sleep 메서드는 프로토타입에 있으며, Human 클래스의 인스턴스인 kimcoding에서 kimcoding.sleep으로 사용할 수 있다.
  • 프로토타입 체인

-프로토타입 체인을 사용하여 객체 지향 프로그래밍의 특성 중 상속을 구현한다.

eg) 클래스 Human의 속성과 메소드 예시

let kimcoding = new Human('김코딩', 30);
// 속성
kimcoding.age;
kimcoding.gender;
// 메소드
kimcoding.eat();
kimcoding.sleep();

eg) 클래스 Student의 속성과 메소드 예시

let parkhacker = new Student('박해커', 22);
// 속성
parkhacker.grade;
// 메소드
parkhacker.learn();

Student는 Human의 특징을 그대로 물려받는다 👉 이 과정을 상속 이라고 한다.
부모 클래스(여기서는 Human) : 속성과 메소드를 물려주는 클래스
자식 클래스(여기서는 Student) : 속성과 메소드를 물려받는 클래스
Student는 Human에게 상속 되었기 때문에 sleep(),eat() 이라는 메소드를 사용할 수 있다.

-DOM과 프로토타입
DOM도 상속 관계로 이루어져있다.
보통 클래스의 인스턴스는 new 키워드로 생성하지만, DOM에서는 new 키워드가 아닌 createElement를 사용한다.

eg) div엘리먼트의 상속관계
화살표 방향은 부모를 가리키는데, 제일 첫번째에 있는 EventTarget의 부모는 모든 클래스의 조상인 Object가 존재한다.

eg)👆 위의 사진을 참고하여 코드 실행 예시 문제를 풀어보자.

let div = document.createElement('div');
div.__proto__ // HTMLDivElement
div.__proto__.__proto__ // HTMLElement
div.__proto__.__proto__.__proto__ // Element
div.__proto__.__proto__.__proto__.__proto__ // Node
div.__proto__.__proto__.__proto__.__proto__.__proto__ // EventTarget

위의 예시 처럼 __proto__를 활용하여 상속 관계를 확인할 수 있다.

💥 한번에 이해가지 않는 부분들은 코드를 짜보며 실행시켜보기
이론만 붙잡고 있는 것보다 직접 실습으로 시도해보는 것이 더 이해가 빠를 수도 있다!!

profile
개발자 꿈나무🌳

0개의 댓글