[TIL] Day24-객체 지향Javascript

공부중인 개발자·2021년 5월 10일
0

TIL

목록 보기
24/64
post-thumbnail

Class & Instance

  • 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴
    청사진 => class 객체 => instance

ES6 에서는 class라는 키워드를 이용하여 정의 가능
생성자 함수는 return값을 만들지 않는다.

class Coding {
    constructor(skill, language, company) {
        //인스턴스가 만들어질 때 실행되는 코드
        this.skill = skill
        this.language = language
        this.company = company
    };
    codingPeriod(num) {
        console.log(num + '년 만큼 코딩을 했습니다.')
    };
    employmentPeriod (num) {
        console.log(num + '년 만큼 이 회사에서 일했습니다.')
    };
};

let gosu = new Coding('senior', 'java', 'Big company'); //gosu라는 instance를 만듬 class Coding을 이용하여
let joongsu = new Coding('junior', 'C++', 'Start company');
let chobo = new Coding('student', 'javascript', 'Look for job');

new 키워드를 통해 클래스의 인스턴스를 만들 수 있음.
위의 constructor(skill, language, company) 는 속성(property), 메소드는 함수 codingPeriod()같이 함수로 만들 수 있다.

this는 인스턴스 객체를 의미
parameter로 넘어온 스킬, 언어, 회사 등은 인스턴스 생성시 지정하는 값
this에 할당한다는 것은, 만들어진 인스턴스에 해당 스킬, 언어, 회사를 부여하겠다는 의미

메소드 정의
생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의
codingPeriod(), employmentPeriod() 같은 것이 메소드

인스턴스에서 사용할 때

gosu.company; // 'Big company'
gosu.codingPeriod(10); // '10년 만큼 코딩을 했습니다.'

prototype 모델의 청사진을 만들 때 쓰는 원형 객체
constructor 인스턴스가 초기화될 때 실행하는 생성자 함수
this 함수가 실행될 때, 해당 스코프마다 생성되는 고유한 실행 context(execution context) new 키워드로 인스턴스 생성 시, 해당 인스턴스가 바로 this의 값

객체 지향 프로그래밍

초기 프로그래밍 언어는 일반적으로 절차적 언어라고 부름, 절차적 언어는 순차적인 명령의 조합

객체 지향 프로그래밍이 생겨나면서 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식을 고안
데이터와 기능을 한번에 묶어서 처리

javascript 는 객체 지향 언어는 아니지만 객체 지향 패턴으로 작성 가능
자바스크립트는 객체 지향 언어는 아니고 프로토타입 지향 언어이지만 객체 지향 프로그래밍을 할 수 있다. 자바스크립트에서 객체 지향 프로그래밍을 하기 위해선 ES6 class 키워드를 이용해야한다.

OOP(Object Oriented Programming)

OOP는 프로그램 설계 철학
OOP의 모든 것은 "객체"로 그룹화
OOP의 4가지 주요 개념을 통해 재사용성을 얻을 수 있다.

  • 캡슐화(Encapsulation)

데이터와 기능을 하나의 단위로 묶는 것, 데이터(속성)과 기능(메소드)들이 느슨하게 결합되는 것
느슨한 결합은 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미
은닉화는 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것
디테일한 구현이나 데이터는 숨기고, 객체 외부에서 필요한 동작(메소드)만 노출
은닉화의 특징을 살려서 코드를 작성하면 객체 내 메소드의 구현만 수정하고, 노출된 메소드를 사용하는 코드 흐름은 바뀌지 않도록 만들 수 있다.

  • 추상화 (Abstraction)

추상화는 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념
캡슐화가 코드나 데이터의 은닉에 포커스, 추상화는 클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스
클래스 정의 시, 메소드와 속성만 정의한 것을 인터페이스라고 함.
메소드 => 내부에 어떤 로직이 있는지 자세히 몰라도 메소드의 이름만 보고 판단할 수 있게
내부 로직을 알 필요가 없다. 가져다 쓰기만 하면 된다.

  • 상속(Inheritance)

상속은 부모 클래스의 특징을 자식 클래스가 물려받는 것
자식 클래스가 부모클래스가 가진 속성과 기능 외에도 추가적인 속성과 기능을 사용할 때 상속이 이뤄진다.

  • 다형성 (Polymorphism)
    동일한 메소드에 객체의 특성에 맞게 달리 작성하는 것(다형성이란 하나의 메소드나 클래스가 있을 때 이것들이 다양한 방법으로 동작하는 것을 의미)

클래스와 프로토타입

JavaScript는 프로토타입 기반 언어, 여기서 프로토타입(Prototype)은 원형 객체를 의미

class Lesson {
  constructor(name, pay) {
    this.name = name;
    this.pay = pay;
  }

 test() {
     consoloe.log(`${this.name} 시험을 봅니다.`);
 }
}
let english = new Lesson('영어', '300,000');

Lesson.prototype.constructor === Lesson; //true
Lesson.prototype === english.__proto__; //true
Lesson.prototype.test === english.test; //true

class Lesson 이 만들어지면 Lesson.prototype 이 만들어지고 이 안에는 constructor와 test(mathod) 가 들어가게 되고 new 키워드를 통해 english 인스턴스가 만들어지게 됨. 그렇기에 english.__proto__(상위 prototype의 링크)가 Lesson.prototype과 같게됨
(다시 공부할 때 그림을 보고 정확히 이해할 수 있어야함)


마지막으로...

section2 가 시작됐고 내가 앞으로 배울 내용은 프론트앤드와 백앤드의 기초가 될것이다. 새로운 것을 배운다는 것은 언제나 두근거린다.

profile
열심히 공부하자

0개의 댓글