끄적끄적

JS를 쓰면서 항상 헷갈렸던게 프로토타입이다. Class도 없고 Function을 Class처럼 쓰고.. 물론 새로나온 JS는 아니지만 어쨋든 헷갈리면서도 일하는데 불편함이 없어서 그냥 넘어가던걸 한번 정리하고자 한다. 참조한 문서는https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes이다.

JS는 prototype-based라고 한다. prototype은 필요한 메소드, 프로퍼티를 정의해놓고 그것을 상속해주기위한 도구라고 생각한다. 이것을 여러단계로 상속하면 prototype chain이라고 부르는 것 같다. 예제를 보자

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}

const person1 = new Person('승우') // function으로 Class를 만들었던 JS는 참 비극이다.

이렇게 Object를 만들면 person1이 사용할 수 있는 메소드와 프로퍼티는 name과 greeting이여야 하는데 

person1.valueOf()을하면 먹힌다. Person에는 valueOf이라는게 없는데. 그렇데 프로토타입으로 부터 상속 받은것이다.

JS의 모든것은 Object이다. function, String, Number등등 그냥 다 Object이다. 그래서 Person function 또한 Object로 부터 상속받는다. 이러한 이유로 person1.valueOf()이 먹힌다는 말씀이시다.

조금만 더 정확히 기술하자면 Object.prototype 의 Object에 기술되어 있다. Object에 관한 문서를 보면 상당히 많은 메소드와 프로퍼티가 있지만 모두다 상속 되지 않는다. Object.prototype에 기술된 것들만 상속된다.

이부분을 약간만 응용하자만

const myString = 'This is my string.'; // String prototype으로 부터 split(), replace()와 같은 아름다운 메소드들을 상속 받기 때문에 myString.split()을 사용할 수 있다는 말이다.

조금 더 응용하자면 Date의 커스텀 prototype을 만들어서 내가 원하는 메소드를 구현하고자 한다.

Date.prototype.yyyymmdd = function () {
   var mm = this.getMonth() + 1;
   var dd = this.getDate();
   return [this.getFullYear(), (mm > 9 ? '' : '0') + mm, (dd > 9 ? '' : '0') + dd].join('-');
}; // yyyymmdd 메소드를 프로토타입에 정의한다.

var date = new Date();

var plusThreeDate = new Date(date.getTime() + (3 * 24 * 60 * 60 * 1000)); // 3일 뒤 Date 생성

plusThreeDate.yyyymmdd() // "2019-09-28"과 같이 yyyymmdd 메소드를 사용할 수 있다.