JS에서 프로토타입을 사용하면 더욱 깔끔한 코드를 짤 수 있다..
이런 말은 많이 들어 봤으나 왜 정작 프로토타입을 사용하는지에 대해서 알지 못하였다.
이번 기회에 JS의 프로토타입, 생성자에 대해 개념 빡시게 정리해보자 🤗
1.객체 생성하기
객체를 생성하는 방법에는 여러 가지가 있다. 어떻게 생성하는지 그 방법을 같이 확인해보도록 하자!
하나하나 배정해주는 방법이 첫번째로 소개할 수 있을 것 같다.
const person = {};
//속성, property라고 합니다.
person.name = '김유진';
person.age = 10;
// 얘는 값이 함수이기 때문에 메소드라고 호칭한다.
person.introduce = function(){
console.log("안녕하세요. 저는 김유진입니다.")
}먼저 person이라는 객체를 만들고 나서 그 이후에 name, age와 같은 프로퍼티(속성)를 추가하는 것이다. 그런데 여기서 고민해야 할 점은, 사람 객체를 한 명만 만들 것이 아니라는 것이다.
사람 객체를 1000명 만들게 되면 어떻게 해야 할까?
생성자 함수를 이용해보자.
function Person(name, age) {
this.name = name;
this.age = age;
this.introduce = function() {
console.log('안녕하세요. 나는' + this.name + '이고, 나이는 ' + this.age + '살이에요.')
}
}이렇게 생성자 함수를 만들 수 있을 것이다. 여기서 this는 무엇일까? 라는 의문으로 그 출처를 알아보자..
this는 메소드를 실행한 주체의 객체를 가리킨다.
즉 나중에const person2 = new Person('유진', 24);라고 수행하게 되면 객체를 기리키는 것으로, 객체의 프로퍼티를 의미한다고 볼 수 있다. 주의해야 할 것은name은 window에 이미 존재하는 객체로this.name이라고 무조건 명시해줘야 원하는 의도대로 사용할 수 있는 것이다.
생성자 함수를 만들었기 때문에
const person2 = new Person('김유진', 25);
person2.introduce();와 같이 new 키워드로 생성자 함수 통하여 새로운 객체를 만들고 프로퍼티 메소드를 이용하면 정상적으로 원하는 의도대로 기능을 개발할 수 있다. 그러나
모든 사람마다 introduce라는 내용의 메소드는 같을 텐데, 하나만 만들어서 공용하는 것이 메모리를 더 아끼는 길이 아닐까!
이럴 때 prototype을 이용해요~
그럴 때는 고민 없이, 생성자 Person에 대한 prototype을 이용하자.
Person.prototype.introduce = function(){
console.log('안녕하세요. 나는' + this.name + '이고, 나이는 ' + this.age + '살이에요.')
}이렇게 프로토타입을 만들어 관리할 수 있다. 그럼 생성자 함수에 존재하는 introduce 메소드를 제거해도 된다.
2. 프로토타입을 활용하여 간단하게 카드를 만들어보자.
const card1 = new Card(1, 'green');
const card2 = new Card(2, 'blue');이 두 줄만을 이용하여 쉽게 아래와 같이 card를 만들어 보자.
Card 생성자를 보면 일반적으로 아래의 코드만 적게 된다.
function Card(num, color) {
this.num = num;
this.color = color;
}그런데, 이것만 받으면 우리가 원하는 CSS대로 card 객체를 화면에 그려낼 수 없다.
위의 예제처럼 단순하게 프로토타입에 메소드 하나만 등록할 수 없으므로, 프로토타입 객체를 만들어야 한다.
프로토타입 객체를 만들기 위해서 꼭 해야 하는 것이 있는데, 그것은 바로 생성자를 만드는 것이다.
프로토타입 객체 안에 생성자를 등록하는 것이다.
Card.prototype = {
constructor : Card,
init: function(){
const mainElem = document.createElement('div');
mainElem.style.color = this.color;
mainElem.innerHTML = this.num;
mainElem.classList.add('card');
document.body.appendChild(mainElem);
}
}프로토타입 객체에 생성자인 Card를 등록하고, 생성자 함수인 init()을 등록하여 Card 객체 안에 존재할 프로퍼티 값을 받아서 style을 꾸민다. 이후 우리가 잊지 말아야 하는 것은 생성자 함수 안에 Card의 프로토타입 객체를 만들어 줄 수 있는 생성자 함수도 잊지 말고 넣어주어야 한다는 점이다.
function Card(num, color) {
this.num = num;
this.color = color;
this.init();
}이렇게 되면 카드를 생성만 해도 init메소드가 정상적으로 실행된다.
