18. javascript 객체 지향 프로그래밍

Lia·2023년 5월 11일
0

클로저 모듈 패턴

사용하는 이유

클로저 모듈 패턴은 코드를 모듈화하여 프로그램을 더 효율적으로 만들어주는 것입니다. 이 패턴은 코드의 안정성을 높여주고, 코드를 재사용하기 쉽게 만들어주며, 프로그램 구조를 더 간단하게 만들어줍니다.

예시)
function makeAgeCounter() {
  let age = 20;
  return {
    increase: function() {
      age++;
    },
    decrease: function() {
      age--;
    },
    getAge: function() {
      return age;
    }
  }
}

let ageCounter1 = makeAgeCounter();
ageCounter1.decrease();
ageCounter1.getAge(); // 19

계산순서는 아래와 같다.
makeAgeCounter() 함수가 호출되어 age 변수가 20으로 초기화된 객체를 반환합니다.
반환된 객체는 ageCounter1 변수에 할당됩니다.
ageCounter1.decrease() 메서드가 호출되어 age 변수가 1만큼 감소합니다. 이 때 age 변수의 값은 19입니다.
ageCounter1.getAge() 메서드가 호출되어 현재 age 변수의 값을 반환합니다. 이 때 age 변수의 값은 이전에 1만큼 감소한 19입니다.

클래스와 인스턴스

클래스는 객체를 만들기 위한 설계도입니다.
인스턴스는 클래스를 이용하여 만들어진 객체를 말합니다.

  • 청사진은 클래스(class)
  • 청사진"을 바탕으로 한 객체는 인스턴스

예를 들어, 클래스는 자동차를 만들기 위한 설계도라면, 인스턴스는 그 설계도를 이용하여 만들어진 실제 자동차입니다.

클래스 키워드 사용

  • 여기서 보이는 함수는, 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부릅니다. 클래스로부터 인스턴스를 생성할 때 호출되는 함수입니다.
  • 이 함수는 객체를 초기화하고, 속성을 설정하는 역할을 합니다
  • 생성자 함수는 return 값을 만들지 않습니다.

인스턴스 만들기

  • 인스턴스를 만들기 위해서는 new 키워드를 사용해야 합니다. 클래스를 이용하여 새로운 객체를 만들 때 사용됩니다. new 키워드 뒤에 클래스 이름을 적어주면, 새로운 인스턴스가 생성됩니다.
  • 각각의 인스턴스는 클래스의 고유한 속성과, 메소드를 갖습니다.

속성과 메소드

  • 학생 객체를 생각해보면 학생의 이름, 나이, 학번 등은 학생의 속성이 됩니다. 객체의 상태와 객체가 가지고 있는 정보를 나타냅니다.

  • 학생 객체가 수업을 듣고, 숙제를 하며, 시험을 보는 등의 동작을 수행할 때는 메소드를 사용합니다. 예를 들어, 학생 객체가 'study'라는 메소드를 가지고 있다면, 이 메소드를 호출하여 학생이 공부를 할 수 있습니다.

this 키워드

  • this는 객체 자신을 가리키는 키워드입니다. 즉, this.name은 해당 객체의 name 속성을 가리킵니다.
  • this는 객체의 속성과 메소드에서 사용됩니다. 생성자 함수 안에서도 this를 사용하여 객체의 속성을 초기화할 수 있습니다.
  • new 키워드와 함께 생성자 함수가 호출될 때, this 키워드는 이 새로운 인스턴스를 가리키게 됩니다. 따라서 생성자 함수 안에서 this 키워드를 사용하여 정의한 속성과 메서드는 새로운 인스턴스에 추가되게 됩니다.

new 키워드

  • new 키워드는 JavaScript에서 객체를 생성하기 위해 사용되는 키워드입니다.
  • new 키워드를 사용하여 클래스의 생성자 함수를 호출하면 새로운 객체 인스턴스가 생성됩니다.
  • 아래와 같이 Student 클래스의 인스턴스를 생성할 수 있습니다.
    new 키워드를 사용하여 Student 클래스의 생성자 함수를 호출하고, name, age, studentId 파라미터를 전달하여 새로운 Student 객체를 생성합니다.
  • new 키워드로 클래스를 생성자 함수로 사용하여 인스턴스를 생성하면, 새로운 빈 객체가 생성됩니다. 이 빈 객체는 클래스의 인스턴스가 되며, 이 인스턴스에는 클래스의 프로퍼티와 메서드를 상속받습니다.

정리

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

  study() {
    console.log(`${this.name} is studying.`);
  }
  
  submitHomework() {
    console.log(`${this.name} submitted homework.`);
  }

  takeExam() {
    console.log(`${this.name} is taking an exam.`);
  }
}
  • Student는 클래스 이름

  • constructor는 생성자 함수, 객체가 생성될 때 인스턴스 속성 값을 초기화함

  • 인스턴스는 클래스를 통해 생성된 객체 즉, 클래스의 생성자 함수를 호출하여 생성된 객체가 인스턴스입니다. 예를 들어, 위의 Student 클래스를 사용하여 const student1 = new Student('John', 20, '001'); 와 같이 객체를 생성하면 student1은 Student 클래스의 인스턴스가 됩니다. 인스턴스는 클래스의 속성과 메서드를 가지며, 각 인스턴스는 서로 다른 값을 가질 수 있습니다.

  • name, age, studentId는 student 클래스의 속성

  • study(), submitHomework(), takeExam()은 메서드, 객체가 가지고 있는 행동이나 동작을 나타냄. 이 메서드들은 console.log()를 통해 메시지를 출력합니다.

객체지향프로그래밍

객체 지향 프로그래밍(OOP)은 객체를 중심으로 프로그래밍하는 방법론입니다. 이 방법론에서는 프로그램을 객체라는 기본적인 단위로 나누고, 이들을 조합하여 프로그램을 작성합니다.

객체는 속성과 메서드로 이루어져 있으며, 속성은 객체의 상태를 나타내고, 메서드는 객체의 행위를 나타냅니다.

객체지향 프로그래밍 4가지 특징

객체 지향 프로그래밍에서는 캡슐화, 추상화, 상속, 다형성이라는 개념이 중요합니다.

  • 캡슐화
    객체의 속성과 메서드를 하나의 단위로 묶어서 외부에서 직접적인 접근을 막는 것을 말합니다. 이를 통해 객체의 내부 구조를 보호하고, 코드의 재사용성을 높일 수 있습니다.

  • 추상화
    객체에서 공통적인 속성과 메서드를 추출하여 하나의 추상적인 개념으로 나타내는 것을 말합니다. 이를 통해 객체들 사이의 공통점을 찾아서 코드의 중복을 줄이고, 객체를 보다 단순화할 수 있습니다.

  • 상속
    이미 정의된 클래스의 속성과 메서드를 다른 클래스에서 재사용하는 것을 말합니다. 이를 통해 코드의 중복을 줄이고, 유지보수성을 높일 수 있습니다.

    -다형성
    같은 이름의 메서드가 다양한 객체에서 다른 방식으로 동작할 수 있는 것을 말합니다. 이를 통해 코드의 유연성을 높일 수 있으며, 객체 지향 프로그래밍의 가장 큰 장점 중 하나입니다.

프로토타입과 클래스

모든 JavaScript 객체는 프로토타입을 가지고 있으며
객체(kimcoding)가 다른 객체(Human)의 속성과 메서드를 상속받는다

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; // 결과는?
Human.prototype === kimcoding.__proto__; //결과는?
Human.prototype.sleep === kimcoding.sleep; //결과는? 

"김코딩" 객체가 Human 클래스의 프로토타입 객체인 것을 의미합니다.
"김코딩" 객체는 Human 클래스의 속성과 메서드를 상속받아 사용할 수 있습니다

프로토타입은 객체의 생성자 함수의 .prototype 속성에 저장됩니다. 이를 통해 생성자 함수로부터 만들어진 모든 인스턴스는 해당 생성자 함수의 프로토타입을 상속받습니다.

또한, 객체는 .proto 속성을 통해 자신의 프로토타입에 접근할 수 있습니다. 이를 통해 객체가 사용 가능한 메서드와 속성을 확인할 수 있습니다.

클래스와 인스턴스, 프로토타입의 관계는 다음과 같습니다.

1) 클래스는 인스턴스를 생성하기 위한 템플릿
2) 인스턴스는 클래스를 기반으로 만들어진 객체
3) 인스턴스는 자신이 기반으로 만들어진 클래스의 프로토타입을 상속받는다.

따라서, 클래스에서 정의된 속성과 메서드는 해당 클래스로부터 만들어진 모든 인스턴스에서 사용 가능합니다.

프로토타입과 클래스의 관계

클래스는 객체를 생성하기 위한 설계도
프로토타입은 클래스로부터 생성된 객체의 원형

클래스는 객체를 생성하기 위한 템플릿으로서 공통적인 속성과 동작을 정의하고, 프로토타입은 클래스를 복사하여 객체를 생성하는데 사용됩니다.

차분하게 하나하나 읽어보니 이해가 간다!
히힝~다만 this키워드가 죄금.. 이해가안간다 ㅠㅠ 코드를,, 실습해보며 익히면 더 나아갈수 있을듯하다. !

프로토타입 체인

객체 지향 프로그래밍의 특성 중 상속을 구현할 때 프로토타입 체인을 사용합니다.
예를들어 클래스 Student, Human 이 있다고 할 때 Student는 Human의 속성과 메서드를 물려받음 + 추가도 가능함. Human을 부모 클래스, Student를 자식 클래스 이과정이 상속!
인스턴스의 __proto__를 이용하면 이를 더 확실하게 확인할 수 있습니다. __proto__를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있습니다.
extends와 super 키워드를 이용해서 상속을 구현할 수 있음.

profile
https://lia-portfolio.vercel.app/

0개의 댓글