19.12.07 개발기록 -[Javascript] Prototype를 이용한 객체 만들기

나같은 초보 개발자(개발자라고 하기에도 민망한..)에게 정말 신과 같은 존재인 무료 인터넷 강의 사이트가 있다.

바로 생활코딩이라는 사이트인데, 닉네임 egoing(이고잉)을 사용하시는 선생님께서 재능기부로 프로그래밍에 대한 기초적인 강의를 완전 무료로 접할 수 있는 곳이다.

https://opentutorials.org/course/1

생활코딩

워낙 유명한 곳이라 많은 분들이 알고 계시겠지만, 만약 모르신다면 위 사이트에 방문해 필요한 강의를 들어보는 것을 적극 추천한다.

암튼 오늘은 주말이라 집에서 쉬면서 프로그래밍을 따로 하지 않았기에, 오늘 공부한 내용을 기록하도록 한다.

바로,

Prototype(프로토타입)

- 프로토타입은 자바스크립트의 기반이 된다고 말할 수 있을 정도로, 굉장히 중요한 개념이다.

- '공통적으로 사용하는 속성을 제작하는 공장'이라고 이해하면 빠르다.

- 프로토타입은 객테를 정의하는 시점이 아닌, 필요한 시점에 정의할 수 있기 때문에 메모리 이점이 있다.

- 프로토타입은 생산된 모든 객체가 공통으로 사용할 수 있고, 재정의가 가능하기 때문에 커스터마이징도 충분히 가능하다 !

function Person(name, first, second, third) {
    this.name= name;
    this.first= first;
    this.second= second;
    this.third= third;
}
 
Person.prototype.sum = function() {
    return "prototype : " + (this.first + this.second + this.third);
};
 
var kim = new Person(kim, 10, 20, 30);
var lee = new Person(lee, 10, 10, 10);
 
kim.sum = function() {
    return "this : " + (this.first + this.second + this.third);
};
 
console.log(kim.sum()); //객체 자신에게 sum이라는 function가 있는 지 확인을 먼저 한다.
console.log(lee.sum()); //sum이라는 function이 없다면, prototype에 메소드가 있는 지 확인한다.
 

function Person(name, first, second, third) --->  Person이라는 함수에 인자로 name, first, second, third를 전달해준다.

그 다음, 각 변수들을 지정해주고,

Person.prototype.sum = ---> Person 객체의 변수들을 이용할 수 있는 sum이라는 메소드를 정의해준다.

 

var kim = new Person(kim, 10, 20, 30);

var lee = new Person(lee, 10, 10, 10); ---> new라는 생성자 함수를 이용해, kim과 lee를 생성 및 변수들을 입력해준다. 

console.log(kim.sum()); --->콘솔로 찍어보면, kim이라는 객체 자체에 먼저 sum이라는 속성이 있는지 찾게 되고, 만약 있다면, 그 객체의 sum이라는 속성을 찾고 출력하게 된다.

console.log(lee.sum()); ---> 만약 lee 객체 자체에 sum이라는 속성이 없다면, new Person 생성자를 통해 생성된 lee 라는 객체에 sum이라는 메소드가 있는지 찾고, 출력하게 된다.

 

오늘은 Prototype에 대해 공부해보았다. 굉장히 중요한 개념이고, 우리 대표님들이 작성하신 코드들을 보면 항상 이게 있어서 '이게 무엇인가...'하고 많이 들여다보았지만 잘 이해하지 못했던 개념이었는데, 

오늘 생활코딩의 Prototype 수업을 듣고, 간단한 코드를 직접 작성해보니, 잘 이해할 수 있었다.

오늘은 굉장히 큰 수확을 하게 된 거 같아 기분이 좋다!

내일은 class에 대해서 포스팅하겠다.

 

이 포스팅을 보시는 분 중 제가 틀린 부분, 잘못 이해한 부분이 있어 알려주실만한 내용이 있다면 언제든 편하게 댓글 남겨주세요 :) 감사합니다 !