객체지향 JavaScript

🐶·2021년 6월 16일

JavaScript 개념

개념 정리

목록 보기

14/41

개념 내용 복기

클래스와 인스턴스(object)

클래스는 함수로 정의할 수 있다.

ES6에서 class라는 키워드를 이용하여 정의할 수도 있다.(최근에 자주 사용하는 방식)

new 키워드를 통해 클래스의 인스턴스를 만들어낼 수 있다.

클래스에 속성과 메소드를 정의하고, 인스턴스에서 사용한다. —> 클래스는 템플릿/청사진!, 인스턴스는 클래스의 사례!

아래와 같이 ES5, ES6의 메소드 정의 문법은 조금 차이가 있다

오! 신기했던 내용

let arr = ['code', 'states', 'pre'];
//아래와 같다
let arr = new Array('code', 'states', 'pre');
arr.length; //3
arr.push('course') //새 요소를 추가

배열 메소드 (push, filter, forEach...)등을 배울 때에, mdn 문서를 유심히 살펴보면 메소드들이 대부분 Array.prototype.메소드명 과 같이 안내되어 있다.

이는 모든 메소드들이 클래스의 원형 객체(prototype)에 정의되어 있기 때문

객체 지향 프로그래밍...?

객체 지향 프로그래밍은 사람이 세계를 보고 이해하는 방법과 매우 흡사합니다. 코드를 추상화하여 직관적으로 생각할 수 있기때문.

객체 지향 프로그래밍이라는 패러다임이 등장하면서, 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, '데이터'와 '기능'이 별개로 취급되지 않고, 한번에 묶어서 처리할 수 있게 되었습니다.

자바스크립트는 엄밀히 말해 객체 지향 언어는 아니지만, 객체 지향 패턴으로 코딩할 수 있습니다.

객체 내에는 "데이터와 기능이 함께 있다"는 원칙에 따라 메소드와 속성이 존재합니다.

아래 캡처는 캡슐화에 대한 설명.

캡슐화의 가장 큰 특징: 은닉화(메소드만 노출!?, 그리고 다른 클래스에서 접근할 수 X)

은닉화를 하게 되면 ? 예측 가능한 코딩을 할 수 있다..

그렇다면 추상화란? 간단히 말해서 버튼을 노출시키는 것.

추상화와 캡슐화는 어떻게 다른가요?

캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있습니다.

인터페이스(Interface)란 무엇일까요?

추상화를 통해 인터페이스가 단순해지는 것.(너무 많은 기능이 노출 X)

JavaScript에서 class 키워드를 사용하면, 메소드의 은닉이 가능한가요?

프로토타입

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

상속 문법

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Inheritance#ecmascript2015클래스

extends 키워드와 super 키워드를 사용함.

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);

    // subject and grade are specific to Teacher
    this.subject = subject;
    this.grade = grade;
  }
}