JS 프로토타입 5편 - OverRiding(커스텀 내장 메서드)

커스텀 내장 메서드 추가

//functionality of built in object

//작년을 나타내려는 함수를 만드려면?
new Date("2023-01-09").lastYear();

Date는 날짜를 나타내는 타입이며 해당 타입에 lastYear라는 내장 메서드는 존재하지 않는다.

여기서 입력받은 날짜의 작년 일자를 계산해 주는 메서드를 만들고자 한다.

Date 생성자 함수의 prototype객체에는 Date전용 메서드들이 존재하는데,

여기에서 객체에 속성을 추가해주듯이 lastYear라는 이름의 함수를 추가해 주면

Date를 사용할 때 정의해 준 함수를 내장 메서드처럼 사용할 수 있다.

유의해야 할 것은 arrow func를 사용할 때에는 this가 dynamic scope가 아닌

lexcally하게 동작하기 때문에 this는 Date객체가 아닌 정의된 위치를 가리키게 된다.

내장 메서드 오버라이딩

//배열의 원소에 #을 추가해서 출력하려면?
console.log([1, 2, 3].map());
//1#,2#,3#

이번엔 새로운 함수를 추가하는 것이 아닌 기존의 메서드를 변형해서 사용하는

오버라이딩을 구현한다.

대상은 배열의 내장 메서드 map함수이며 본래는 모든 원소를 순회하며

인자로 전달된 콜백함수등의 동작을 수행해 주는 함수이지만

이번엔 모든 원소뒤에 #표시를 붙여주는 함수로 변형해 본다.

Array.prototype.map = function () {
  let arr = [];
  for (let i = 0; i < this.length; i++) {
    arr.push(this[i] + "#");
  }
  return arr;
};

console.log([1, 2, 3].map());

마찬가지의 방법으로 배열 생성자 함수의 프로토타입객체에 접근하는데 이번엔 

기존에 존재했던 map에 함수를 재정의해준다.

간단하게 각 원소를 반복문으로 접근해 #을 붙여준 후 새로운 배열을 만들어서 리턴해주면 

원하는 결과를 리턴하는 map함수를 재정의할 수 있다.

유의해야 할 점은 협업 시나 그게 아니더라도 기존의 함수를 변형하는 경우에 

혼동이 생길 수 있음을 생각해야 한다.

OverRiding

사실상 내장 메서드를 재정의하는 것은 엄밀히 말하자면 오버라이딩은 아니다.

하지만 위와 같은 방식으로 상속받은 메서드를 재정의한다면,

예를 들어 Array와 Function은 Object를 상속받고 있으니

Object의 내장 메서드를 Function에서 재정의 한다면 오버라이딩을 구현할 수 있다.