JavaScript

Object(인스턴스) 생성하는 4가지 방법 / Prototype 이란

짱닭 2020. 10. 28. 17:45
반응형

Object(인스턴스)를 생성하는 방법

1.Functional

var Car = function(){
  var instance = {};
  instance.position = 0;
  instance.move = function(){
    this.position++;
  }
  return instance;
};

//생성시에 인자를 전달해서 position의 초기값을 할당하는 방법.
var Car = function(position){
  var instance = {};
  instance.position = position;
  instance.move = function(){
    this.position++;
  }
  return instance;
};

var car1 = Car();
var car2 = Car();
car1.move();

2.Functional Shared

var extend = function(to, from){ //from의 키,밸류를 to에 복사한다
  for(var key in from){
    to[key] = from[key];
  }
};

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

var Car = function(position){
  var instance = {
    position: position;
  };
  extend(instance, someMethods); //someMethods의 내용을 instance에 복사.
  return instance;
};

var car1 = Car(5);
var car2 = Car(10);

someMethods 를 따로 빼놓고 인스턴스에 추가하는 이유는 1번의 Functional 방식대로 인스턴스를 만들게 되면
모든 인스턴스에 메서드들이 다 들어있기 때문에 메서드의 수만큼 메모리를 더 많이 차지한다.

Functional Shared 방식을 사용하면 메서드들의 메모리 주소만을 참조하기 때문에 메모리 효율이 좋아진다.

ex)
속성1 메서드1을 갖는 메서드가 있다.

1.Functional 방식은
인스턴스1(속성1, 메서드1) 인스턴스2(속성1, 메서드1) 인스턴스3(속성1, 메서드1)
총 3개의 인스턴스에 6칸의 메모리를 사용한다.

2.Functional Shared 방식은
메서드1
인스턴스1(속성1, 메서드1참조) 인스턴스2(속성1, 메서드1참조) 인스턴스3(속성1, 메서드1참조)
총 3개의 인스턴스에 4칸의 메모리를 사용한다.

3.Prototypal

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

var Car = function(position){
  var instance = Object.create(someMethods);
  instance.position = position;
  return instance;
};

var car1 = Car(5);
var car2 = Car(10);

Object.create()는 특정 객체를 프로토타입으로 하는 객체를 생성해주는 함수.

4.Pseudoclassical

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

Car.prototype.move = function(){
  this.position++;
};

var car1 = new Car(5);
var car2 = new Car(10);

new 키워드를 사용하는 것이 특징.
가장 많이 사용되는 방법이다.

Prototype은 무엇이고 왜 사용해야 하는지?

JavaScript의 모든 객체는 자신을 생성한 객체 원형에 대한 참조가 있다.
여기서 객체 원형을 prototype이라고 한다.

prototype은 function이 선언될 때 기본 프로퍼티로 들어가고,
내부에 객체가 있다.

JavaSctipt는 ECMA6 표준에서 Class 문법이 추가되기 전까지 클래스가 없었다.
클래스가 없기 때문에 상속을 사용하기 위해 prototype 객체를 사용했다.

prototype 객체는 인스턴스(객체)가 생성될 때 내부의 constructor 메서드를 호출한다.

prototype 은 객체와 객체를 잇는 prototype chain이라는 것이 있다.
prototype 내부를 보면 __proto__가 있는데 그 안에는 또 __proto__이 자리하고 있다.
__proto__는 상위 객체의 prototype을 의미한다.

__proto__, constructor

__proto__

모든 객체가 갖고있는 prototype link이다.
__proto__는 상위 객체의 prototype이 들어있다.
인스턴스.__proto__.__proto__하고 반복해서(체인) 올라가면 최상위 객체의 prototype에 도달할 수 있다.

 Class.prototype === instance.__proto__ //true

__proto__속성안에 조상의 prototype도 들어있기 때문에 어떤 객체라도 상위 객체의 속성과 메서드를 갖는다.

constructor

생성자는 인스턴스(객체)가 생성될 때 실행되는 함수다.
생성자에 인자로 값을 전달하여 객체의 속성을 할당할 수 있다.

[Javascript]프로토타입 이해하기 https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

Javascript 기초 - Object prototype 이해하기 http://insanehong.kr/post/javascript-prototype/

반응형