[TIL] 2021.02.26

이머시브 과정 5일째 날이다 오늘은 벌써 이머시브 1주차 마지막 날이 되었는데 1주동안 많은 것 을 배워 어떻게 흘러갔는지도 모르겠다...
오늘은 OOP 와 Prototype의 대해서 공부하는 시간을 가지게 되었다. 아직은 잘 이해하지 못했지만 내가 이해한 선에서 간략하게나마 정리해보고 더 공부해보자 !

🔥Today Lesson🔥

• OOP(Object Oriented Programming)
• Prototype Chain

OOP🏳

OOP는 Object Oriented Programming약자로
객체 지향 프로그래밍을 의미한다. 즉 OOP는 여러 객체들이 모여서 서로 상호작용을 하는 것이다.

OOP를 이해하기 위해선 기본구성요소인 "객체" 와 "클래스"의 대해서 어느정도 알고있어야 하는데 이전에 포스팅 작성 한게 있다.

간단하게만 말하면 객체와 클래스를 주로 붕어빵과 붕어빵을 찍는 기계라고 흔히들 표현하는데 이 표현이 가장 이해하기 쉬운거 같다😅

붕어빵을 찍어내는 기계는 붕어빵이란 객체를 만들수 있는 틀을 제공한다. 즉 붕어빵을 찍는 기계는 "클래스" 라고 할 수 있고 그 기계로 만들어진 붕어빵 하나하나를 "객체" 라고 할 수 있다.

그럼 이제 OOP의 특성의 대해서 알아보자 !

OOP의 특성

1. 캡슐화 : 캡슐화는 사용할때 내부의 어떤 기능들이 있는지는 모르더라도 사용법만 알면 사용 할 수 있도록 내부를 감출수 있다. 즉 은닉화 라는 특징을 가지고 있다.

   예를들어 리모콘을 사용할때 리모콘 내부의 어떤 회로가 있고 구성이 어떻게 되어 있는지 알고 있지 않더라도 조작법만 알고 있으면 사용 할 수 있다. 즉 캡슐화로 불필요한 정보를 은닉 할 수 있는 특징이 있는 것이다.

2. 추상화 : 추상화는 객체들의 공통된 특징을 찾아 하나로 묶는 것 을 의미한다.

   예를들어 토끼, 강아지, 사자, 코끼리 라는 객체가 있다고 해보자 이 객체들의 공통점은 동물이라는 점이다 다시 말해 객체들을 동물이라고 묶는 것 을 추상화 라고 한다.

3. 상속 : 상속은 부모 클래스의 특징을 자식 클래스가 물려 받는 것이다. 상속이 필요한 이유는 불필요한 코드의 중복을 없애기 위해서 이다.

   예를들어 동물 이라는 클래스가 있다고 가정해보자 그리고 추가적으로 강아지 라는 클래스를 만들때 강아지의 본질은 동물이다 그렇기에 강아지의 특징중 동물과 공통된 특징이 있을 것 이다. 이때 일일히 강아지의 특징을 다 적는 것 이 아니라 부모 클래스인 동물의 특징을 상속받고 강아지의 추가적인 특징을 적는 것 을 상속이라고 한다.

4. 다형성 : 다형성은 형태는 같지만 다른 기능을 하는 것 을 의미합니다. 즉 부모 클래스 에서 상속받은 것 을 자식 클래스 에서 다르게 나타내는 것 을 의미한다.

   예를들어 고양이 클래스 에서 "울음"을 나타내는 함수가 정의 되어 있다고 가장해보자 이때 자식 클래스로 고양이과 인 호랑이 클래스를 만들때 고양이 클래스에서 "울음" 함수를 받아 사용 할 수 있지만 고양이는 "냐옹~" 소리를 내지만 호랑이는 "어흥!" 소리를 낸다. 이때 다형성을 사용하여 물려받은 함수의 값을 재정의(오버라이딩) 할 수 있는데 이것을 다형성 이라고 한다.

Javascript에서 prototype
자바스크립트 에서는 클래스 라는 개념이 없다. 그래서 기존의 객체를 복사하여 새로운 객체를 만들어내는 프로토타입 기반의 언어라고 불린다.

다음 코드를 보면서 이해 할 수 있도록 해보자.

function Animal() {
  this.leg = 4;
  this.ear = 2;
  this.eye = 2;
} 

let dog = new Animal()
let cat = new Animal()

console.log(dog.leg) // -> 4
console.log(cat.leg) // -> 4

이때 dog와 cat 객체가 생성 되면서 메모리에는 중복이 된 6개의 변수가 저장 되었을 것이다.

function Animal() {}

Animal.prototype.leg = 4;
Animal.prototype.ear = 4;
Animal.prototype.eye = 4;

let dog = new Animal()
let cat = new Animal()

console.log(dog.leg) // -> 4
console.log(cat.leg) // -> 4

위에 코드와 비슷해 보이지만 현재 dog와 cat 객체가 만들어지면서 dog와 cat각자가 변수를 가지는 것 이 아니라 Animal객체의 leg속성을 공유하는 것 이다. 이렇게 되면 6개의 중복된 변수가 저장이 된게 아니라 같은 생성자로 만들어진 객체들은 하나의 프로토타입 이라는 객체를 공유하는 것 이다.

Prototype Chain🏳

자바스크립트 에서는 객체를 상속 받기위해서 Prototype Chain을 사용합니다. 특정 객체에서 프로퍼티를 사용 할 때 원하는 프로퍼티가 없다면 프로퍼타입 링크를 따라서 그 부모 객체로 접근하는데 이를 Prototype Chain이라 한다.

모든 객체가 가지고 있는 __ proto__ 속성은 부모 객체를 가리킨다.

constructor는 자신을 생성한 함수를 가르키며, 프로토타입 객체가 가지고 있는 프로퍼티 이다.

다음 코드를 보면서 Prototype Chain을 이해해보자.

let Person = function(name) {
  this.name = name;
}
Person.prototype.sleep = function() {
  console.log(this.name + "는(은) 자는중입니다...")
}

let kkt = new Person("kkt")

console.log(kkt.sleep);
// -> kkt는(은) 자는중입니다...
//kkt의 참조는 Person
console.log(kkt.__proto__ === Person.prototype);
//kkt의 참조의 참조는 Object
console.log(kkt.__proto__.__proto__ === Object.prototype);
//kkt의 생성자는 Person
console.log(kkt.constructor === Person);

Prototype Chain 활용하여 상속 효과내기
위에 코드를 이어서 사용합니다.

function Student (name){
  Person.call(this, name) // Person.apply(this, arguments)
}
Student.prototype.learn = function (){
  console.log(this.name + '는(은) 공부중입니다!')
}

let kkj = new Student("kkj")
console.lg(kkj.learn()) // -> kkj는(은) 공부중입니다!
console.lg(kkj.sleep()) // -> kkj는(은) 자는중입니다... 
//Person의 객체를 복사하여 Student에 상속한다. 
Student.prototype = Object.create(Person.prototype);
//상속관계를만들고 constructor를 Student로 할당 해 주지 않으면
//constructor는 Person을 바라보게 된다
console.log(kkj)
// -> ▶ Person {name: "kkj"}
Student.prototype.constructor = Student;
console.log(kkj)
// -> ▶ Student {name: "kkj"}
//Student의 instance를 만든다.
console.log(kkj instanceof Person) // -> true
console.log(kkj instanceof Student) // -> true

위 코드를 보면 복잡하며 지져분해 보인다 이를 보완하기위해 es6에서 class가 나오며 이를 사용하면 간다하게 나타낼수 있다.
다음 예제를 보며 이해해보자.

class Person {
  constructor(name) {
   this.name = name;
  }
  sleep() {
    console.log(this.name + "는(은) 자는중입니다...")
  } 
}

class Student extends Person {
   constructor(name) {
     super(name); // this를 호출해온다. 만일 생성자의 속성이 같다면 생략할 수 도 있다.
   }
   learn() {
     console.log(this.name + "는(은) 공부중입니다!") 
   }
}

let kkt = new Student("kkt")
console.log(kkt.learn()) // -> kkj는(은) 공부중입니다!
console.log(kkt.sleep()) //-> kkj는(은) 자는중입니다...

하루를 마치며👋

오늘 공부하면서 멘탈이 많이 나갔던거 같다... 공부를 하고 블로깅을 작성하는 시간이 있었는데 나는 이해가 안되서 블로깅을 포기하고 구글링 해가며 이해하는데 시간을 다쓴거 같다...😅 그래도 시간이 오래 걸리긴 했지만 OOP와 class의 대해서는 어느정도 머리에 들어온거 같아서 BeesBeesBees 스프린트 진행할때 class부분은 페어와 소통하며 해결 할 수 있었다. 근데 prototype은 아직 이해가 안되서 그런지 헷갈린다... 다음시간에는 BeesBeesBees prototype쪽을 진행하는데 주말동안 다시 한번 복습하는 시간을 가져야겠다 ! 🧐🧐🧐