객체지향 프로그래밍

객체지향 프로그래밍 ?
객체지향은 프로그래밍 방법론중에 하나로 객체들을 서로 소통할 수 있게만든 방법!
객체 지향의 객체는 우리가 표현하고자 하는 구체적인 사물을 추상적으로 표현한 것,
추상적이란 최소한의 정보로 대상을 표현 한 것이다
-> 나를 추상적으로 표현해보자

      const me = {
        name: 'jeein',
        age: '10',
        height: '200',
        toDoList: function () {
          console.log('Do It!');
        },
        checkList: function (study) {
          study.levelUp();
        },
      };

      const up = {
        level: 1,
        levelUp: function () {
          this.level++;
        },
      };

      console.log(me.checkList(up));
      console.log(up); // 호출 될때 마다 level: 2 -> level: 3... 1씩 늘어난다

이처럼 me 객체와 up 객체가 다르지만
서로 다른 객체가 소통하여 같은 프로퍼티와 메서드를 공유 할수있다

👉 하지만 객체는 한번 생성하면 끝난다
반복적으로 객체를 만들수 밖에 없는데 좀 더 효율적으로 만들어보자
여기서 반드시 알아야 하는 개념인 생성자 함수를 알아보자

생성자 (constructor)

생성자 함수는 객체를 만들 때 new 연산자와 함께 사용하는 함수이다

❓ 도대체 생성자 함수를 통해 왜 만들어야 하는가?
생성자를 통해 생성된 객체는 같은 프로퍼티와 메서드를 공유할 수 있다는 것

1. 생성자 함수의 시작은 대문자로!
2. new 키워드를 붙인다

      function Factory() {}
      let result1 = Factory(); // undefined
      let result2 = new Factory(); // Factory {}
      

result1은 Factory 함수를 실행시켜주어 return 값이 없기 때문에 undefined 출력,
result2는 new 키워드를 붙여 새로운 Factory{} 함수를 생성, 반환 했다
-> 이것을 ✨ 인스턴스(instance) 라고 불린다

     result2 instanceof Factory; // true
     result1 instanceof Factory; // false 
     // result1는 Factory 반환일뿐 인스턴스는 아니기때문
     

  ✅✨ 
  - 생성자 함수 앞에 new 연산자가 사용되면 함수안의 this는 생성자가 만들어낸 객
  체 즉, 인스턴스를 참조
  - this가 sayHi를 sayHi2를 sayHi3를 ... 이런식으로 대상이 바뀌면서 가르키게 된다
  - sayHi,sayHi2 변수는 NewFactory의 인스턴스 이다!
  
  function NewFactory(name) {
    this.name = name;  // this - window, NewFactory는 전역공간에 있기 때문
    this.sayYourName = function () { // 마찬가지로 this - window
      console.log(`나의 이름은 ${this.name}입니다 만나서 반가워요😉`);
    };
  }

  const sayHi = new NewFactory('지인');
  console.log(sayHi.name); // 지인
  console.log(sayHi.sayYourName()); // 나의 이름은 지인입니다 만나서 반가워요😉

  const sayHi2 = new NewFactory('김코드');
  console.log(sayHi2.name); // 김코드
  

하지만 이렇듯 객체를 생성할때 마다 새로운 함수를 만들어야 한다
프로토 타입을 사용하여 효율적으로 객체를 생성해보자

프로토타입 (prototype)

프로토타입(prototype)은 특정 객체에 대한 참조이다
__proto__ 프로퍼티는 자신을 만든 생성자 함수의 prototype을 참조하는 역할.
즉, new 키워드를 통해 생성자 함수의 prototype과 인스턴스의 __proto__ 가 연결된다

👉 음식 메뉴를 랜덤으로 뽑아내는 기능을 가진 객체의 생성자를 만들어 콘솔로 출력해보자

        function FoodPicker(foodNames) {
          this.name = foodNames; 
          // this가 인스턴스를 가르키게 되어 name 이라는 프로퍼티를 가지게 된다
          this.sayMenu = function () {
            console.log(
              `오늘의 메뉴는 ${
                this.name[Math.floor(Math.random() * this.name.length)] 
                // 배열의 갯수를 곱함
              } 입니다`
            ); // this.name은 foodNames이기 때문에 []로 접근한다.
          };
        }

      const robot1 = new FoodPicker(['짜장면', '청국장', '김치찌개']); 
      // 인스턴스가 새로 생길때마다 새로운 함수가 생겨난다
      const robot2 = new FoodPicker(['짜장면', '청국장', '김치찌개']);

     robot1.sayMenu(); // 오늘의 메뉴는 김치찌개 입니다
     robot1.sayMenu(); // 오늘의 메뉴는 짜장면 입니다
      
      robot1 == robot2 -> // false // 같지 않다

robot1을 만든 생성자 함수는 FoodPicker 이기때문에
{constructor: ƒ} === FoodPicker.prototype 은 true 가 된다

✨✅ prototype는 함수에 있고 프로토 프로퍼티 __proto__ 는 인스턴스에 있다
생성자함수랑 같이 호출되면 this랑 인스턴스를 연결된다