안녕하세요 크로네입니다.
오늘은 코딩에서 프로토타입이라는 것에 대해 알아보겠습니다.
1. 프로토타입?
일단 위키백과에 따르면, 프로토타입은
이라고 합니다.
그러니까, 쉽게 말하자면 처음 상태인겁니다.
그래서 코딩에서 프로토타입은 어떠한 타입의 기본 function 등이 저장되는 것입니다.
일단, Node.JS(또는 javascript) 에서의 예시를 살펴볼까요?
String.prototype.plusHi = function() {
return this + "hi";
}
console.log("안녕".plusHi());
이 코드를 실행하면, 다음과 같은 겨로가를 얻을 수 있습니다.
이해가 되시나요?
String 타입의 프로토타입에 plusHi 라는 함수를 넣었더니,
"안녕", 즉 String 에 기본적으로 설정되는, plusHi 라는 이름의 함수가 생긴겁니다!
String의 프로토타입은 뭐가 있을까요?
바로 split, splice 등입니다.
많이들 써보셨을텐데요, 아래의 코드를 봅시다.
var keyword = "안녕,하이,인사,한국어인사";
console.log(keyword.split(","));
split 의 예시입니다.
이런식으로 split 은 우리에게 친숙한 것인데요,
NodeJS 말고도, 다른 많은 언어에 String.prototype.split 이 있습니다.
"그러면, prototype 을 이용해서 나만의 새로운 타입을 만들수는 없나요?"
2. 새로운 타입을 만들어보자
그것도 가능합니다! 아래의 예시를 살펴봅시다.
var Hi = function(object) { // Hi 라는 이름의 타입을 만든다.
if(object != null && object != undefined) { // object 에 값이 있다면 (참고로 값을 적지 않으면 undefined가 됨)
var temp = new Hi(); // temp 라는 변수에 new Hi() 값을 넣는다.
// 이때, new Hi() 의 괄호 안에 값을 넣으면, Hi 라는 함수안에서 Hi 라는 함수를, 또 그 안에서 Hi 라는 함수를 계속 실행한다.
// 이렇게되면 너무 많이 반복하여 오류가 난다. 그러니 절때 안에 값을 넣으면 안된다.
// 위의 조건이 있는것도 그것 때문이다.
for(var i = 0; i < Object.keys(object).length; i++) { // object 에 키들을 for문으로 돈다. 대소문자 주의!
temp[Object.keys(object)[i]] = object[Object.keys(object)[i]]; // Hi에 Object.keys(object) 값을 object[Object.keys(object)] 로 바꾼다. 즉
// object에 있는 key 와 value 를 return 할 Hi 에 넣는다는 뜻.
}
return temp; // 설정한 값들을 출력합니다. 참고로 출력하지 않으면 prototype 이 있는 Hi 가 나옵니다.
}
};
Hi.prototype = {}; // Hi 의 프로토타입을 비게 한다. 이때, String.prototype, Object.prototype 을 적으면, 해당 타입의 prototype 을 Hi 의 prototype 에 넣는다.
Hi.prototype.clear = function() { // 값을 비운다.
return new Hi();
}
Hi.prototype.a_plus = function(x) { // a 라는 곳의 값을 x 만큼 더한다.
var temp = this.a; // a 라는 값을 temp 에 저장한다. 참고로 this 는 현재 값을 의미한다. 예시로,
// var a = new Hi();
// a.a = 123;
// a.a_plus(100);
// 을 실행할 때, this 는 a가 된다.
this.a = temp + x; // 값을 더한다.
return temp; // temp(이전에 저장했으니, 이전값) 을 return 한다.
}
오... 좀.... 길죠? 그래서 주석을 좀 달아놓았습니다.
천천히 읽어보시기 바랍니다.
일단 이런상황일때 예시를 봅시다.
var a = new Hi();
console.log(a);
console.log(a.a_plus);
var b = new Hi({"a": 123, "b": 456});
console.log(b);
a.a = 123;
console.log(a);
a.a_plus(100);
console.log(a);
먼저, a를 new Hi() 로 합니다.
그다음 그 값을 출력하죠. 이때, a.a_plus 도 출력하는데,
prototype 이 잘 설정되었다면, undefined 또는 오류없이 출력될겁니다.
그리고 b 를 new Hi({"a": 123, "b": 456}) 으로 설정합니다.
그후에 값을 출력하죠. 이것도 잘 나오겠죠?
다음으로 a.a 를 123 으로 한 뒤에,
a.a_plus 프로토타입으로 100 을 a.a 에 더합니다.
그리고, 전과 후의 값을 출력하죠.
한번 출력을 볼까요?
이런 값이 나왔습니다.
일단 a의 값과 a의 프로토타입은 잘 출력 되었습니다.
그리고 b의 값도 잘 출력되었고요,
a를 더하기 전과, 후도 잘 출력되었습니다.
지금까지, 프로토타입에 대해 알아보았습니다.
좋게 읽으셨다면, 공감도 많이많이 눌러주시고,
궁금한게 더 있으시다면, msg.kronae@gmail.com 또는 댓글 부탁드립니다.
그럼 지금까지, 크로네였습니다. 다음에 또 봬요!
'코딩' 카테고리의 다른 글
[코딩] Return? 이뭐죠? (0) | 2022.12.08 |
---|---|
[코딩] JSON? 그게 뭐지? (0) | 2022.12.08 |
[Node.js] Srt 자막파일을 JSON 으로 파싱하고 수정하기 1편 (0) | 2022.12.07 |
[JS] 쿼리스트링을 가져와서 JSON 으로 바꾸기 (0) | 2022.12.06 |
[Node.js] 데이터베이스 직접 만들기 2편 (0) | 2022.11.06 |
댓글