객체지향 - Constructor & Prototype

🦾 Constructor

• 비슷한 object를 여러개 만들고 싶을 때 사용
• object를 안전하게 복사할 때 사용

function 기계(이름){ // constructor
  this.name = 이름;
  this.age = 15;
  this.sayHi = function(){
    console.log('안녕하세요' + this.name + ' 입니다');
  }
}

var 학생1 = new 기계('Park'); // instance 생성 방법

이 과정을 상속이라고 부른다.

🧬 Prototype

상속을 구현할 수 있는 또 다른 문법으로 js에만 존재하는 문법이다.

constructor를 만들면 항상 prototype이 그 안에 몰래 생성되는데
⭐ prototype은 자식들이 물려받을 수 있는 유전자라고 생각하면 된다.
➡️ 따라서 prototype에 값을 추가하면 모든 자식들이 이를 물려받을 수 있다.

prototype은 아래와 같이 오브젝트 자료형 다루듯이 하면 된다.

function 기계() {
  this.name = "Kim";
  this.age = 15;
}

기계.prototype.gender = "남"; 

var 학생1 = new 기계();
console.log(학생1.gender); // 남

기계의 유전자인 기계.prototype에 gender : '남'이라는 데이터를 추가한 것이다. 이제 기계로부터 생성되는 모든 자식들은 gender라는 속성을 사용할 수 있다.

Prototype의 작동 원리

js는 object에서 데이터를 뽑을 때 아래와 같은 순서로 확인 과정을 거친다.

1. 학생1이 직접 gender를 가지고 있는가?
2. 그럼 학생1의 부모 유전자(기계.prototype)가 gender를 가지고 있는가?
3. 그럼 부모의 부모 유전자가 gender를 가지고 있는가?
4. 그럼 부모의 부모의 부모 유전자가 gender를 가지고 있는가?
   ...

   ✨ 즉, 내가 직접 가지고 있는지 검사하고 없으면 부모 유전자들을 차례대로 검사한다.

자바스크립트 내장함수 toString() 을 쓸 수 있는 이유

var arr = [1,2,3];
arr.toString(); // ✅

이게 가능한 이유는 array의 부모 유전자가 toString()을 가지고 있기 때문!

Js 입장에서는 array를 만들 때 아래와 같이 만든다.

// 사람의 입장
var arr = [1,2,3]

// js의 입장
var arr = new Array(1,2,3);

즉, Array라는 constructor로부터 arr라는 instance를 생성한 것이다.
따라서 arr의 부모 유전자(Array.prototype)가 sort, map등을 가지고 있기 때문에 arr에서 sort, map등의 내장함수를 사용할 수 있는 것이다.

Prototype의 특징

1. Prototype은 함수에만 생성된다

일반 object, array를 만들어도 여기엔 prototype이 없다.

2. 내 부모 유전자를 찾고 싶다면 __proto__

function 기계() {
  this.name = "Kim";
  this.age = 15;
}

기계.prototype.gender = "남"; 

var 학생1 = new 기계();
console.log(학생1.__proto__); // { gender: '남'}
console.log(기계.prototype); // { gender: '남'}

3. __proto__를 직접 등록하면 object끼리 상속기능을 구현 가능

var 부모 = { name: "Kim" };
var 자식 = {};

자식.__proto__ = 부모; // 나의 부모 유전자는 이걸로 해주세요~
console.log(자식.name); // Kim

4. 콘솔창에서 prototype 정보 찾기

이렇게 부모 유전자를 조회할 수 있다.

탐색하다보면 모든 object 자료형, array 자료형, 함수 자료형의 조상은 Object() 라는 기계다.

❔ Prototype으로 상속시키는것과 Constructor로 상속시키는것의 차이

• constructor로 상속: 자식들이 값을 직접 소유하게 됨
• prototype으로 상속: 부모만 값을 가지고 있고 자식들이 이를 참조해서 사용하게 됨

  따라서, 상속할 수 있는 함수 같은 것들은 prototype으로 주로 많이 만들어 놓는다.

✍️ 연습 문제

Q. 모든 array에 적용할 수 있는 'array 내에 있는 3이라는 값을 제거해주는 함수'를 직접 새로 만드려면 어떻게 해야할까요?

var arr = [1,2,3];
arr.remove3();

console.log(arr); // [1,2]

A.

Array.protptype.remove3 = function(){
  for (var i = 0; i < this.length; i++) {
    if ( this[i] === 3 ) {
      this.splice(i,1);
    }
  }
};

Array라는 부모의 prototype에 위와 같이 remove3를 추가해주면 된다.
위의 코드에서의 this는 현재 remove3이라는 함수를 작동시키는 object (여기서는 arr)이다.