우리가 쓰는 매서드들은 어디서 오는가!? : prototype

 

 

.map( ) .filiter( ) .substring( ) 등 우리가 흔히 불러와서 쓰는 매서드들이 있다.

보통 매서드들의 하는 역할을 구글링하고 쓰는 방법을 가져와 적용시키는데 문득 이 매서드들은 어디서 오는가?

궁금해졌다. 그래서 이번에 한번 정리해 보려고 한다.

그리고 우리가 console.log 를 찍을 때 마다 나오는 Prototype가 뭔지도 알아야하지 않을까!? 

같은 맥락이니 함께 정리한다.

 

---

 

 

 

프로토타입의 개념과 활용

프로토타입이란 무엇인가?

 

프로토타입 = 유전자  라고 생각하면 이해 쉬움

 

▶  프로토타입은 객체 지향 프로그래밍에서 상속을 받는 객체의 원본. ex) 아버지(프로토타입) -> 아들(상속받는 객체)

▶ 자바스크립트에서 모든 객체는 __proto__라는 내부 프로퍼티를 가지고 있는데, 이는 해당 객체가 상속받은 다른 객체를 가리킨다.

▶ 이 객체는 프로퍼티와 메서드를 포함하고 있어, 상속을 통해 해당 객체가 이를 이용할 수 있음.

function 아빠() {
  this.name = 'Kim';
  this.age = 29;
}

아빠.prototype.gender = '남';

var 아들1 = new 아빠();
var 아들2 = new 아빠();

console.log(아들1.gender); // '남'을 출력
console.log(아들1); // { name: 'Kim', age: 29 }을 출력

 

 

 

의문점!? 

 

위에서 아빠.prototype.gender 을 추가했다. 아들1.gender 을 출력해보니 '남' 이 나오는건 이해된다.

그런데 아들1 을 출력했는데 왜 gender은 출력안될까?

프로토타입 체인과 그 중요성

객체에서 어떤 속성 또는 메서드를 찾을 때, 해당 객체의 프로토타입으로 이동하여 없는 경우 계속해서 상위 프로토타입으로 이동하는 것을 반복한다. 이것이 프로토타입 체인의 동작 방식

프로토타입 체인은 객체 간의 상속 관계를 형성하고, 코드 내에서 어떤 속성이나 메서드를 찾을 때 해당 체인을 따라 올라가며 찾게 된다. 이는 상속을 통해 객체가 갖는 속성 및 메서드를 찾고 사용할 수 있게 해줌.

 

 

 

function 아빠() {
  this.name = 'Kim'; // 아빠 객체의 name 속성 설정
  this.age = 29; // 아빠 객체의 age 속성 설정
}

아빠.prototype.gender = '남'; // 아빠 객체의 prototype에 gender 속성 추가

var 아들1 = new 아빠(); // 아빠 함수로 아들1 객체 생성
var 아들2 = new 아빠(); // 아빠 함수로 아들2 객체 생성

console.log(아들1.gender); // '남'을 출력 - 아들1은 아빠의 프로토타입으로부터 gender 속성을 상속받음
console.log(아들1); // { name: 'Kim', age: 29 }을 출력 - 아들1 객체는 직접 name과 age 속성을 가짐

 

아들1과 아들2 객체는 아빠 함수로부터 생성되었으며, 아빠.prototype에 추가된 gender 속성을 상속받음.

따라서 아들1.gender를 출력하면 '남'이 출력되고, 아들1 객체는 name: 'Kim', age: 29 속성을 직접 갖는다.

함수와 프로토타입의 관계

자바스크립트에서 함수도 객체이며, 함수가 생성될 때마다 prototype이라는 특수한 프로퍼티를 가진다.

이 prototype 프로퍼티에는 새로 생성된 객체의 프로토타입이 지정됨.

이것은 해당 함수를 통해 생성된 객체들이 공유하는 프로퍼티 및 메서드를 담고 있다.

// 사람 객체 생성을 위한 함수 정의
function 사람(이름) {
  this.이름 = 이름;
}

// 사람 함수의 prototype에 자기소개 메서드 추가
사람.prototype.자기소개 = function() {
  return `안녕하세요, 제 이름은 ${this.이름}입니다`;
};

// 사람 객체 생성
const 사람1 = new 사람('앨리스');

// 사람1 객체의 자기소개 메서드 호출 및 출력
console.log(사람1.자기소개()); // 출력: 안녕하세요, 제 이름은 앨리스입니다

 

 

prototype의 작동원리

    arr = [1,2,3]을 만들 때 어떤 흐름일까?

arr = [1,2,3] 을 만들 때 동작이 아래처럼 진행된다.
var arr = new Array(1,2,3); Array이라는 constructor을 사용하여 arr에 배열을 만드는 것!

//즉 Array(=기계이며 부모) arr(=자식)이다. 
//여기서 arr.sort()를 했는데 

console.log(arr)  // [1,2,3]만 출력되네? sort()가 없네?? 그럼 부모를 찾아간다...

console.log(Array.prototype) 
//array가 가진 함수들이 나옴. .length() .constoructor() 등등
//따라서 arr.sort()는 부모의 함수를 가져오는 것.

**** 모든 배열의 부모는 Array() 이다.

 

 

예시)

[1,2,3]에 map 함수를 만들어준 것이 아님에도 매서드로 사용할 수 있는 이유는 

prototype chain으로 인해 거슬로 올라가면 최싱위 object인 Array에 속성으로 있어서 사용할 수 있음.