JavaScript에는 다른 언어에는 있는 Class 라는 개념이 없다.
ES6 이후 부터는 Class 문법이 추가되었지만, 이는 prototype 으로 그 기능을 구현하는 것이라고 생각하면 될 것 같다.
오늘은 그렇다면 Class 문법이 사용되기 전에는 어떻게 Object 를 만들었는지,
즉, 객체를 생성하는 4가지 방법에 대해서 공부한 내용을 블로깅해보려고 한다.
먼저 들어가기전
Class 는 하나의 정형화된 모델을 만들고, 그 모델을 기반으로 인스턴스(복제품) 를 만들기 위해 사용한다고 생각하면 될 것 같다.
4 Instantiation Patterns
(1) Functional
(2) Functional Shared
(3) Prototypal
(4) Pseudoclassical
1. Functional Instantiatioin
: 말 그대로 함수를 이용하여 인스턴스를 찍어내는 방법이다.
var Car=function(position){
var someInstance = {};
someInstance.position = position;
someInstance.move = function(){
this.position += 1;
}
return someInstance;
}
var car1 = Car(5);
var car2 = Car(0);
car1.move();1. 먼저 Car라는 함수를 만들어준다.
그리고 찍어낼 인스턴스, 즉 찍어내줄 객체를 만들어준다.
return 을 해줘야 함수의 결과로 객체가 반환이 될 것이다.
2. 결과로 찍어낼 인스턴스 , 즉 someinstance 에 move라는 메소드를 추가해준다.
그리고 function 안의 this 는 someInstance를 가리키기 때문에 this.position은
someInstance.position 과 같고 함수를 실행할때 position 값이 1만큼 증가될 것이다.
3. 이렇게 우리는 instance를 생성할 수 있게된다.
car1 을 생성할때 position의 값으로 인자를 5를 넣게되면 자동으로 position이 5에 위치하게 될 car1을 생성하게 될 것이다.
그런뒤에 car1.move()를 통해 메소드를 실행시키고 console.log(car1)을 찍어내면
기본값이 position 5 이던 car1이 1만큼 증가되어 6을 찍어내는 것을 볼 수 있을 것이다.2. Functional Shared
var extend = function(to, from){
for ( var key in from) {
to[key] = from[key];
}
};
var someMethods= {};
someMethods.move = function(){
this.position+=1;
};
var Car=function(position){
var someInstance = {
position: position;
};
extend(someInstance, someMethods);
return someInstance;
};
var car1 = Car(5);
var car2 = Car(10);1. 먼저 Car 함수를 선언을 해준다. 위와 다른점은 positon 을 someInstance 의 property로 만들어준 것 외에는 달라진 것이 없다.
2. 그리고 메소드를 담아줄 someMethods 라는 객체를 하나 생성한다. move라는 기능만이 들어갈 것이다.
3. 마지막으로 someMethods 와 someInstance를 합쳐줄 extend 함수를 만들어주고
Car함수 내부에서 합칠 것이다. 그렇다면 굳이 왜 이런 번거로운 방법을 사용할까?
1. 이전 Functional 방법에서는 모든 메소드를 someInstance에 할당하기 때문에 각각의 인스턴스들의 메소드의 수에 따라 메모리가 증가하게 된다.
2. Functional shared 방법은 someMethods라는 객체에 있는 메소드의 메모리주소만을 참조하기 때문에 메모리 효율이 좋아진다.
출처: codestates
3. Prototypal
이제부터는 간단해진다.
var someMethods = {};
someMethods.move = function() {
this.position += 1;
};
var Car = function(position) {
var someInstance = Object.create(someMethods);
someInstance.position = position;
return someInstance;
};
var car1 = Car(5);
var car2 = Car(10);Fucntional shared 와 비슷하지만 달라진 점은
var someInstance = {} 부분에서
var someInstance = Object.create(someMethods) 를 사용한 것이다.
**Object.create은 특정 객체를 (여기서는 someMethods) 프로토타입으로 하는
새로운 객체를 생성하는 함수이다. **
4. Pseudoclassical
마지막은 직접 메소드를 프로토타입을 이용하여 만드는 방법이고, 제일 많이 쓰인다.
var Car = function(position) {
this.position = position;
};
Car.prototype.move = function() {
this.position += 1;
};
var car1 = new Car(5);
var car2 = new Car(10);1. car 함수를 만들어 준 뒤,
2. move 메소드를 프로토타입으로 만들어 준다.
3. 하지만 인스턴스를 찍어내고자 할 때는 new operator 를 붙여줘야한다.
다음에서는 "JavaScript에서 Prototype은 무엇이고 왜 사용해야 하는지?" 에 대해 공부하고자 한다.
