생성자와 프로토타입

생성자

 

생성자 함수는 객체를 생성하는 함수입니다. ES6에서는 class를 사용할 수 있지만 ES5에서는 class가 존재하지 않습니다. 

function Shield(selector) {
  this.parent = document.querySelector(selector);
  this.dom = null;
}

함수를 사용하는 방법과 별로 다르지 않는데 차이점은 대문자로 시작한다는 것입니다.

생성자를 바탕으로 객체를 생성할 수 있습니다.

객체를 생성할 때는 new라는 키워드를 사용해서 생성합니다.

 

사람이라는 생성자를 만들어 본다면

function Person(name, age){
this.name = name;
this.age =age;
    	
}

이렇게 만들 수 있습니다.

 

여기서 this라는 키워드는 중요합니다. this라는 키워드를 생략할 경우 전역 객체인 window의 속성으로 적용되므로 this라는 키워드를 써주어야만 합니다.

 

 

프로토타입

prototype은 생성자로 생성된 타입의 공유되는 저장소라고 생각할 수 있습니다.

따라서 prototype객체에 메서드, 변수를 지정하게 되면  생성자로 생성할 경우 동일한 메서드와 변수를 가지고 생성되게 됩니다.

예시를 들어보자면 

function Person(name, age){
this.name = name;
this.age =age;
}

Person.prototype = {
	
    gender : "남",
   
    run : function(){
    console.log("달려요~");
    },
    fastRun : function(){
    console.log("빨리 달려요~");
    }
}

var a = new Person("d",2);
var b = new Person("f",3);

a.gender = "여";

변수 a , b 는 기본적인 속성으로 gender를 key값으로 가지고 있으며 value값으로 "남"이라는 값이 들어가 있습니다.

 

원하는 객체의 gender값을 변경해주기위해서  a.gender ="여"; 로 변경해줄 수 있습니다.

 

이렇게 사용한다면 메모리사용에 큰 장점이 존재합니다. 그 이유는 만약 생성자의 함수를 선언하게 되면 자바스크립트에서는 함수 또한 객체이므로 객체가 생성될 때마다 함수가 생성됩니다. 하지만 프로토타입을 이용하게 되면 한 번만 생성이 되므로 메모리 사용에 이점을 얻을 수 있습니다.