객체 지향 프로그래밍

Bruce·2021년 8월 18일

프론트엔드 코어

목록 보기
12/31

객체 지향 프로그래밍

1. OOP(객체지향프로그래밍)이란?

우리가 주변의 실세계에서 사물을 인지하는 방식을 객체를 사용하여 프로그래밍에 접목하려는 프로그래밍 방법을 의미한다.

2. 자바스크립트 특징

  1. 자바스크립트는 프로토타입 객체 지향 언어.
  2. 자바스크립트는 함수레벨스코프라서 외부에서 함수 코드 블럭 내부에 접근이 불가능하다.
  3. 블록레벨스코프(조건문, 반복문) 등은 외부에서 블록레벨스코프 내부 변수에 접근이 가능하다.(let, const는 불가능.)

3. 객체를 만드는 방법 3가지.

자바스크립트는 클래스 개념이 없다
  1. 객체 리터럴
  2. 생성자 함수
  3. Object 생성자 함수

4. 자바스크립트의 객체 지향 프로그래밍

프로토타입(Prototype)

예제 01.

funciton Parent() {
    this.alert = function(){
    	alert('alert');
    }
    this.log = function() {
		console.log('log');
    }
};

예제 02.

function Parent(){}
Parent.prototype.alert = function() {
    alert('alert');
}
Parent.prototype.log = function() {
    console.log('log');
}
const child = new Parent();
//ƒ () {
//    console.log('log');
//}
child.alert;
//ƒ () {
//    alert('alert');
//}
child.log;
//ƒ () {
//    console.log('log');
//}

각각의 예제가 다른 점은 예제 01은 인스턴스를 생성할 때 마다 불필요한 메모리를 차지한다는 점이다.
자바스크립트는 프로토타입 기반 언어이기 때문에 프로토타입 키워드를 사용하면 원형을 공유하는 인스턴스들은 해당 메서드를 공유하게 된다. 인스턴스를 생성할 때 마다 메서드를 계속해서 생성하지 않기 때문에 메모리 문제가 해결이 된다.

프로토타입 체이닝(Prototype Chaining)
프로토타입 체이닝은 원하는 객체에서 찾는 값이 없을 경우 해당 객체의 상위 객체에서 해당 값을 찾는 것.

function Parent() {}

Parent.hasOwnProperty
// ƒ hasOwnProperty() { [native code] }

Parent.test
// undefined

hasOwnProperty라는 메서드를 정의하지 않았음에도 불구하고 해당 메서드를 참조할 수 있다. 상위에 Object라는 자바스크립트의 모든 객체가 공유하고 있는 메서드가 존재하기 때문이다.
반면 Object에도 없는 test라는 메서드를 참조했을 경우 undefined가 뜬다.

캡슐화(Encapsulation)
객체는 블록레벨스코프 혹은 함수레벨스코프로 데이터를 감싸는 캡슐화(encapsulate), 즉 객체 패키지(namespace)를 통해 데이터를 보관한다. 내부 구현 내용을 감추어 외부에서 확인 할 수 없도록 정보를 은닉 혹은 객체 끼리의 오염을 방지할 수 있다. 자바스크립트는 클로져로 캡슐화를 구현이 가능하다.

상속(Inheritance)
프로토타입 기반 상속을 통해 부모 객체의 프로퍼티를 물려 받아 사용 할수 있다. 자바스크립트는 프로토타입 체인으로 상속을 구현이 가능하다.

  1. 의사 클래스 패턴(Pseudo-classical) 상속
    의사 클래스 패턴은 자식 생성자 함수의 prototype 프로퍼티를 부모 생성자 함수의 인스턴스로 교체하여 상속을 구현하는 방법이다.

의사 클래스 패턴의 문제 3가지

  • constructor 링크의 파괴:
    생성자 링크를 파괴한다. 의사 클래스 패턴 상속은 프로토타입 객체를 인스턴스로 교체하는 과정에서 constructor의 연결이 깨지게 된다.

  • 다른 생성자 함수와의 new 연산자를 통한 불필요한 과정:
    new 연산자를 통해 인스턴스를 생성한다. new 키워드 생략 시 바인딩에 문제가 생긴다. this가 새로운 객체를 바인딩하는 것이 아닌 전역 객체에 바인딩 된다. 이러한 문제를 경감 시키기 위해 생성자 함수에 파스칼 표기법을 권장한다.

  • 객체리터럴 방식으로 생성한 객체의 상속이 불가능:
    객체리터럴 패턴으로 생성한 객체의 생성자함수는 Object라서 바꿀 방법이 없다

  1. 프로토타입 패턴(Prototypal) 상속

프로토타입 패턴 상속은 Object.create 함수를 사용하여 객체에서 다른 객체로 직접 상속을 구현하는 방식이다. 프로토타입 패턴 상속은 개념적으로 의사 클래스 패턴 상속보다 더 간단하다. 또한 의사 클래스 패턴의 단점인 new 연산자가 필요없으며, 생성자 링크도 파괴되지 않으며, 객체리터럴에도 사용할 수 있다.

추상화
우리가 객체를 만들 때에는 복잡한 원리나 구동 방식을 사용자로부터 추상화시켜주는 작업을 추상화(Abstraction)라고 한다

다형성
같은 객체임에도 오버로딩이나 오버라이딩을 사용하여 상황에 따라 다르게 사용 할 수 있다.
오버로딩은 같은 객체의 매개변수의 유형과 개수를 다르게 만들어 낼 수 있는 것 인데 약타입인 자바스크립트에는 해당되지 않는 내용이고, 오버라이딩은 부모 객체가 갖고 있는 함수를 자식 객체에서 재정의해서 사용할 수 있는 것.

profile
Figure it out yourself

0개의 댓글