{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"5bb213e5-b6f0-5b26-925b-0927ed01ee72","excerpt":"Instantiation Patterns ES6 전의 Class 선언 방식 Functional Functional Shared Prototypal Pseudoclassical Class는 하나의 정형화 된 모델(틀)을 만들어 두고, 그 모델을 기반으로 한 인스턴스(복제품)를 만들기 위해 사용 Functional 인스턴스를 생성할 때 마다 모든 메소드를 someInstance에게 할당하므로, 각각의 인스턴스들이 메소드의 수만큼의 메모리를 더 차지함. Functional Shared…","html":"

Instantiation Patterns

\n

ES6 전의 Class 선언 방식

\n
    \n
  1. Functional
    2. \n
  2. Functional Shared
    3. \n
  3. Prototypal
    4. \n
  4. Pseudoclassical
    5. \n
\n

Class는 하나의 정형화 된 모델(틀)을 만들어 두고, 그 모델을 기반으로 한 인스턴스(복제품)를 만들기 위해 사용

\n
    \n
  1. Functional
    2. \n
\n

인스턴스를 생성할 때 마다 모든 메소드를 someInstance에게 할당하므로, 각각의 인스턴스들이 메소드의 수만큼의 메모리를 더 차지함.

\n
    \n
  1. Functional Shared
    2. \n
\n

프로퍼티(someInstance) 객체와 메소드(someMethods) 객체를 분리. 그 둘을 합치는 extend 함수를 만들어서 내부에서 합쳐줌. someMethods라는 객체에 있는 메소들의 메모리 주소만을 참조하여, Functional에 비해 메모리 효율이 상승

\n
var extend = function(to, from) {\n  for (var key in from) {\n    to[key] = from[key]\n  }\n}
\n
    \n
  1. \n

    Prototypal

    \n

    Functional Shared에서 var someInstance = {} 부분을

    \n
    2. \n
\n

var someInstacne = Object.create(someMethods); 로 변경해준 걸로 끝.

\n

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

\n
    \n
  1. Pesudoclasscial (가장 많이 쓰는 방식)
    2. \n
\n

메소드를 프로토타입으로 바꿔주고, 프로퍼티 객체에선 this를 사용해서 지칭해줌.

\n
var Robot = function(position) {\n  this.position = position\n}\n\nRobot.prototype.clean = function() {\n  this.position += 1\n}\n\nvar robot1 = new Robot(5)\nvar robot2 = new Robot(10)\n// 찍어낼 때에 new operator 를 붙여줘야 함.
\n

키/값 저장소로는 객체, 숫자 인덱스를 가진 저장소로는 배열을 쓰는 게 좋다.

","frontmatter":{"title":"Instantiation Patterns","date":"September 25, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180925 Instantiation Patterns/","previous":{"fields":{"slug":"/til/20180922 IM08D06 DATA Structure Day 4/"},"frontmatter":{"title":"Immersive Sprint - DATA Structure Day 4","category":"TIL"}},"next":{"fields":{"slug":"/til/20180927 IM08D07, 20180928 IM08D08 SubClass Dance Party/"},"frontmatter":{"title":"Immersive Sprint - SubClass Dance Party","category":"TIL"}}}}