[JS] ES5문법과 ES6문법에서 객체를 만드는 차이

ES5 문법에서 객체 만들기

 

1. Functional

var Car = function() {			//Car라는 함수를 변수 선언식으로 만듭니다. 클래스 선언시는 대문자로
	var someInstance = {};		//반환할 객체, 즉 복제품(Instance)를 선언
    
    someInstance.position = 0 ;		//위치 속성 선언
    someInstance.move = function() {//위치 이동하는 기능(method)을 함수로 선언함
    	this.position += 1;
    }
    
    return someInstance;		//복제품(instance) 반환
};

var car1 = Car();				//instance 만들기 및 method 실행
var car1 = Car();
car1.move();

 

2. Functional Shared

var Car = function(position) {	//functional한 방식으로 객체선언
	var someInstance = {
    	position: position;
    };
    extend(someInstace, someMethod);  //-->extend 함수 넣기
    return someInstance;
}

var someMethods = {};			//Car의 method를 담을 객체를 따로 선언함
someMethods.move = function() {
	this.posiotion +=1;
}

var extend = function(to, from) { //someInstance와 someMethods를 합치는 extend 함수
	for(var key in from) {		//-->Car 객체에도 넣기
    	to[key] = from[key];
    }
};

 

 

3. Prototypal

var someMethods = {};
someMethods.move = function() {
	this.position += 1;
};

var Car = function(position) {
	var someInstance = Object.create(someMethods);  //->{}대신 Object.create()활용
    someInstance.position = position;
    return someInstance;
};

var car1 = Car(5);	//실행
var car2 = Car(10);

 

4. Pseudoclassical

var Car =function(porition) {
	this.position = position;
}

Car.prototype.move = function() { //prototype으로 연결하여 method 생성
	this.position += 1;
};

var car1 = new Car(5);  //여기는 new로 선언되는 이유는 무엇일까?
var car2 = new Car(10);