[TIL] 자바스크립트와 OOP

archToDev()·2021년 4월 11일

JavaScript OOP Prototype Today I learned class

OOP(Object Oriented Programming) 객체지향 프로그래밍은 무엇인가?

객체지향 프로그래밍은 실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨어의 세계에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추출하는 추상화(abstraction)를 통해 모델링하려는 프로그래밍 패러다임을 말한다. 다시 말해, 우리가 주변의 실세계에서 사물을 인지하는 방식을 프로그래밍에 접목하려는 사상을 의미한다.

우리가 자동차를 떠올렸을 때 공통적으로 생각하는 핵심적인 속성(개념)과 기능이 있다. 자동차는 특정한 브랜드, 이름, 색상등이 있다는 것을 생각하고. 또한 자동차는 엑셀 페달과 브레이크 페달이 있어 속도를 내거나 줄일 수 있다는 것을 생각한다. 이는 보편적인 자동차를 생각한 것이고 자동차의 청사진 (blueprint)이라고 할 수 있다. 객체지향 프로그래밍에서는 이 청사진을 class라 한다. 보편적인 자동차의 속성과 기능을 이어받아 새로운 속성과 기능을 더 추가한 자동차를 떠올릴 수 있다. 객체지향 프로그래밍에서 이것을 인스턴스라고 한다.

객체지향 프로그래밍의 장점

함수의 집합, 명령어의 집합이었던 기존의 절차지형 프로그래밍과는 달리 객체지향 프로그램밍은 여러 객체들의 집합이 서로 관계를 맺는 관점으로 접근하는 소프트웨어 디자인이다.

각 객체들은 데이터를 처리하고 메시지를 주고 받을 수 있다. 상위 객체에 속성이나 기능을 추가하면 하위 객체들에 그 속성과 기능이 전달된다. 그래서 유지보수가 쉽고 확장성이 좋다.

class 와 instance

객체지향프로그램은 간단하고 재사용이 가능한 코드의 청사진인 Class 들로 이루어져 있다. 이들로 각각의 객체 인스턴스를 만들어낼 수 있다.

class는 주로 공통된 속성을 가진 어떤 한 범주를 대표한다. 이를 바탕으로
1. 다른 프로퍼티나 속성을 지닌 class를 상속을 통해 만들어내거나
2. new 연산자를 통해 더 구체적이면서 특정한 객체 instance들을 만들어내기 위해 사용된다.

자동차를 Car라는 클래스라고 생각해보자. 자동차는 브랜드, 이름, 색 등 차라면 모두 가지고 있는 공통된 속성이 있다. 클래스는 이러한 공통속성들을 미리 설정한다. 하지만 이들의 구체적인 내용, 값을 규정하지는 않는다.

class Car {
  //생성자함수
  constructor(brand, name, color) {
    this.brand = brand; // 속성 정하기 
    this.name = name;
    this.color = color;
    this.speed = 0
  }
}

Car 클래스 안에는 브랜드, 이름, 색상같은 속성뿐만 아니라 엑셀 페달을 밟으면 속도가 증가한다든지, 브레이크를 밟으면 속도가 감소한다 등등의 여러 기능도 있다. 이들을 method라 부른다.

class Car {
  //생성자함수
  constructor(brand, name, color) {
    this.brand = brand; // 속성 정하기 
    this.name = name;
    this.color = color;
    this.speed = 0
  }
  // 메소드
  // 엑셀페달을 밟았을 때...
  stepOnGasPedal() {
    this.speed += 5;
    //속도가 5 증가
  }
  //브레이크페달을 밟았을 때...
  stepOnBrakePedal() {
    this.speed -= 5;
    //속도가 5 감소
  }
  
  //현재 속도를 알아내는 기능
  getValueofSpeed() {
    return this.speed;
  }
 
}

1. 상속을 통해 새로운 클래스 생성

Class 키워드는 ES6에서 도입되었고 이 키워드와 더불어 super키워드를 사용해 쉽게 클래스 상속을 할 수있다.

Class Suv extends Car {
  constructor(brand, name, color, height){
    super(brand, name, color)
    //super 메소드는 부모클래스의 constructor를 호출하고 인자들을 전달한다.
    this.height = height;
  }
}

2. new 연산자를 이용해 인스턴스 생성

이 클래스를 바탕으로 new 연산자를 이용해 새로운 인스턴스를 만들 때에는 속성들의 구체적인 값들을 설정해주면 된다.


let myCar = new Car ('Benz', 'Eclass', 'Silver');
// myCar라는 인스턴스 생성 및 구체적인 속성값 설정

myCar.brand === 'Benz'
myCar.name === 'Eclass'
myCar.color === 'Silver'

myCar.getValueofSpeed(); // 0

myCar.stepOnGasPedal(); // myCar.speed === 5
myCar.stepOnGasPedal(); // myCar.speed === 10
myCar.stepOnGasPedal(); // myCar.speed === 15
myCar.stepOnBrakePedal(); // myCar.speed === 10

myCar.getValueofSpeed(); // 10

코드의 청사진 Car 클래스는 아래처럼 재사용할 수 있다.

let mySubCar = new Car('Hyundai', 'Grandeur', 'black')
mySubCar.brand === 'Hyundai'
mySubCar.name === 'Grandeur'
mySubCar.color === 'Black'

mySubCar.getValueofSpeed(); // 0

JavaScript에서 Prototype은 무엇이고 왜 사용해야 하는지?

자바스크립트는 프로토타입을 기반으로 하는 객체지향 프로그래밍언어이다.

프로토타입을 기반으로 하는 객체지향 프로그래밍 언어가 클래스를 기반으로 하는 객체지향 프로그래밍 언어와 다른 점은 클래스 없이도 객체를 생성할 수 있다는 것이다.

let obj = { fruit: 'apple', status: 'ripening', color: 'green' }
// 이렇게 클래스 없이 객체를 생성할 수 있다.

cosole.log(obj.hasOwnProperty('fruit')); //true
//obj 객체 안에는 hasOwnProperty라는 메소드가 없지만 
//obj의 부모객체 메소드와 프로퍼티를 상속받았기 때문에 정상적으로 메소드가 작동한다.

출처: poimaweb

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다.

Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다.

`proto` , constructor, prototype 의 관계

__proto__ accersor property는 자신의 부모객체인 Person.prototype에 접근하게 해준다
jieun 객체의 prototype 객체인 Person.prototype에 접근하려면jieun.__prototype__ 을 입력해주면 된다.

console.log(jieun.__proto__ === Person.prototype) // true

프로토타입 객체는 constructor 프로퍼티를 갖는다. 이 constructor 프로퍼티는 객체의 입장에서 자신을 생성한 객체를 가리킨다. 그러므로 Person.prototype.constructor는 Person 생성자함수를 가리킨다.
객체의 입장에서 자신을 생성한 객체를 가리키므로 new Person()으로 생성된 jieun 객체의 constructor는 Person 생성자함수를 가리킨다.
Person 입장에서 Person을 생성한 객체는 Function이라는 함수이므로
Person.constructor === Function 가 성립한다.

/*1.*/console.log(Person.prototype.constructor === Person) // true
/*2.*/console.log(jieun.constructor === Person) //true
/*3.*/console.log(Person.constructor === Function) // true

console.log(Person.__proto__ === Function.prototype) //true
console.log(Person.__proto__.__proto__ === Object.prototype) // true
console.log(Person.prototype.__proto__ === Object.prototype) // true