TIL 211005 - 객체 지향 JavaScript

Section 2 시작!

Achievement Goals

• 클래스와 인스턴스라는 용어를 이해할 수 있다.
  • new 키워드의 사용법을 이해할 수 있다.
  • class 키워드의 사용법을 이해할 수 있다.
  • 현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인할 수 있다.
• 객체 지향 프로그래밍 특징을 이해할 수 있다.
  • 캡슐화
  • 상속
  • 추상화
  • 다형성
• JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다.
  • Prototype이 무엇인지 이해할 수 있다
• 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다.
  • 상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다.
  • 클래스 상속의 원리를 이해할 수 있다.
  • Prototype chain을 이해하고 설명할 수 있다. (__proto__)

 

내가 일전에 배운 JAVA에서 객체지향의 구현과 JS에서 객체지향 구현은 조금 다른 방식이라고 한다.

그리고 JS에서는 이미 객체라는 것이 존재한다.

 

˙JAVA에서 내가 알고 있는 객체와 인스턴스의 의미

객체 : 실제로 존재하는 것

클래스 : 객체를 정의해 놓은 것

 

프로그래밍에서의 객체는 클래스에 정의해 놓은 대로 생성된 것으로

객체는 속성과 기능으로 구성되어 있다.

 

SE에서

속성은  변수이고

기능은 함수(메소드)로 정의된다.

 

클래스의 인스턴스화 : 클래스로부터 객체를 만드는 과정

클래스의 인스턴스 : 어떤 클래스로 부터 만들어진 객체

 

Chapter 1 - 클래스를 이용한 모듈화

(1) 클래스와 인스턴스

1. Singleton으로 객체지향 구현

let counter1 = {
  value: 0,
  increase: function() {
    this.value++
  },
  decreas: function() {
    this.value--
  },
  getValue:function() {
    return this.value
  }
}

counter1.increase()
counter1.getValue()

 

2. 클로저 함수 패턴 : 클로저는 함수를 인자로 가질 수 있고 콜백 함수를 가지는 특징

function makeCounter() {
  return {
    value: 0,
    increase: function() {
      this.value++ // 메소드 호출을 할 경우, this는 makeCounter 함수가 리턴하는 익명의 객체입니다
    },
    decrease: function() {
      this.value--
    },
    getValue: function() {
      return this.value;
    }
  }
}

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

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

위의 2가지 코드에서 공통적으로 나오는 단어들을 보면 하나는 value이고 하나는 increas라는 것이다.

여기서 value는 변수이고 increase, decrease, getValue는 모두 함수를 의미한다.

this.value는 변수 value가 포함되어 있는 객체를 뜻하는 것이다.

 

3. 새로운 인스턴스를 만드는 방법

JS와 객체와 구별하여 클래스의 객체라는 의미에서 인스턴스라는 용어로 객체를 지칭한다. 클래스는 대문자로 시작하고 새로운 객체를 만들기 위하여 new키워드를 사용하여 새로운 객체를 만든다.

 

ECMA Script 6에서는 class 키워드를 사용하여 함수를 정의할 수 있게 하였다.

생성자 constructor 함수는 인스턴스가 만들어질 때 실행된다.

ES5에서는 prototype이라는 키워드를 사용해서 메소드를 정의하였다. 

prototype은 클래스의 객체를 만들 때 쓰는 original 객체이다.

Car 클래스에 메소드를 추가하기 위해서는 `Car.prototype.refuel`과 같이

`prototype`을 이용한다.

 

ES6에서는 생성자 함수와 함께 refuel() { }, drive() { }로 정의되었다.

this는 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context이다.

new 키워드로 인스턴스를 생성했을 때 해당 인스턴스가 바로 this가 된다.

 

ES5

ES6

Chapter 2 - protoptype

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

초기 프로그래밍 언어는 절차 언어.

변수와 함수를 순차적으로 작동시키는 언어.

 

객체 지향 프로그래밍 패러다임 등장하면서 데이터와 기능을 한꺼번에 묶어서 처리할 수 있게 되었다.

객체에는 속성과 기능으로 구성되어 있다.

 

클래스는 객체를 정의해 놓은 것으로 생성자를 통해 속성을 넣으면 객체가 만들어지게 된다.

이것을 인스턴스 객체라고 하고 줄여 인스턴스라고 부른다.(JS의 객체와 구분)

객체지향의 기본 개념

• 캡슐화 : 변수와 함수를 하나로 묶어서 은닉 시킴. 느슨한 결합. 엄격한 클래스 구성은 속성에 대한 직접적 접근 방지. 설정함수(setter, getter)를 구분//간단한 코드와 재사용성 높임
• 상속 : 부모 클래스의 특징을 자식 클래스가 물러 받는 것. 기본 클래스의 특징을 파생 클래스가 상속받는다. 부모 클래스의 속성과 메소드를 재구현할 필요없이 상속을 이용해서 그대로 사용할 수 있음. //불필요 코드줄이고 재사용성 높임
• 추상화 : 인터페이스 단순화. 클래스를 사용하는 사람이 필요하지 않는 메소드는 노출시키지 않고 이름만 정의//간단한 코드, 변화 영향 최소화
• 다형성 : 동일한 메소드이지만 다양한 형식으로 구현 가능

Must know concepts

질문

• 추상화와 캡슐화는 어떻게 다른가요? 추상화는 클래스간의 공통점을 찾아서 공통의 조상 클래스는 만드는 작업으로 
• 인터페이스(Interface)란 무엇일까요? 추상의 정도가 높아서 불완전한 형태로 다른 클래스의 작성에 도움을 준다.
• JavaScript에서 class 키워드를 사용하면, 메소드의 은닉이 가능한가요?

(2) 클래스와 프로토타입

자바스크립트는 프로토타입 기반 언어. prototype은 원형객체 의미

prototype Chain

(3) 프로트타입 체인

자바스크립트에서는 프로트타입 체인을 통해 상속 기능을 구현할 수 있다. 자바스크립트는 extends나 super 키워드를 통해서 상속을 구현할 수 있다. (필수 학습 자료) ECMAScript 2015 클래스

 

ES6를 보면 new 키워드 사용하거나 새로운 class를 만들며 extends로 부모 클래스를 상속받는 방법이 나온다.

DOM 클래스 다이어그램

질문

• addEventListener 속성은 어떤 클래스의 프로토타입에서 찾을 수 있나요?
• remove 메소드는 어떤 클래스의 프로토타입에서 찾을 수 있나요?
• 모든 객체에 toString() 메소드가 존재하는 이유가 무엇인가요?