[JavaScript] 객체지향 프로그래밍 1.클래스와 인스턴스

Hyun Jin·2023년 1월 13일

JavaScript

목록 보기

15/20

주요 개념

메서드 호출, 클로저 모듈 패턴, 클래스, 인스턴스, ES6의 클래스 문법, new, 생성자 함수, this, 객체 지향 프로그래밍

학습 목표

클로저 모듈 패턴에 대해 설명할 수 있다.
클래스와 인스턴스에 대해 설명할 수 있다.
클래스 문법을 이용할 수 있다.

학습내용 정리

객체지향 Chapter1. 객체 지향

Chapter1-1. 클로저 모듈 패턴메서드의 정의

메서드 호출 : 객체.메서드() 로 호출 가능.

예제 코드

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ // 메서드 호출을 할 경우, this는 counter1을 가리킵니다
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

화살표 함수에는 this 가 바인딩되지 않아서(자신의 this 가 없어서) 화살표 함수를 둘러싸는 렉시컬 스코프의 this 를 참조하게 됨. 때무에 현재 범위내에서 존재하지 않는 this 를 찾을 때, 화살표함수는 바로 바깥 범위에서 this 를 찾고 검색을 끝내게 됨.⇒ 메서드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않음.

클로저 모듈 패턴

예제 코드

function makeCounter() {
  let value = 0;
  return {
    increase: function() {
      value++;
    },
    decrease: function() {
      value--;
    },
    getValue: function() {
      return value;
    }
  }
}

let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2

Chapter1-2. 클래스와 인스턴스

개요

클래스(Class) : 청사진

인스턴스(instance) : ‘청사진’을 바탕으로 한 객체

객체 생성 방법

let 객체명 = new 클래스명(’’)

클래스명은 보통 대문자로 시작하며 일반명사로 만듬.(일반적인 함수는 적잘한 동사를 포함하고 소문자로 시작)

let avante = new Car(’blue’)

ES5 class 작성 문법 :

function Car(brand, name, color) {
	constructoer(brand, name, color){
	// 인스턴스가 만들어질 때 실행되는 코드
	// 메서드 정의 방법 : 
	Car.prototype.refuel = function(){// 코드 내용}
}
// : **생성자(constructoer) 함수.**

ES6 class 작성 문법 :

class Car {
	constructoer(brand, name, color){
	// 인스턴스가 만들어질 때 실행되는 코드
	// 메서드 정의 방법 : 
	refuel() {// 코드 내용}
}
// : **생성자(constructoer) 함수.**

new 키워드를 사용해 인스턴스를 만들때, 즉시 생성자 함수가 실행되며 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당됨. 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 됨.

속성과 메서드 : 클래스에 속성과 메서드를 정의하고, 인스턴스에서 이용함.

this : 인스턴스 객체. parameter 로 넘어온 값은 인스턴스 생성 시 지정하는 값이며, this 에 할당한다는 것은 만들어진 인스턴스에 parameter 를 할당해주는 것.

클래스 메서드의 정의 방법 : 생성자함수와 함께 class 키워드 안쪽에 묶어서 정의함.

예제 코드

class Student {
    constructor(name, age, grade) {
        this.name = name;
        this.age = age;
        this.grade = grade;
    }
    getAvrGrade() {
        let avgGrade = this.grade.reduce((acc,cur)=> acc+cur)/this.grade.length;
        return Math.round(avgGrade)
    }
}

let jane = new Student('Jane', 17, 2);
jane.age;// 17
jane.getAvrGrade(); // 32