Instantiation 4patterns

BenKim·2020년 6월 18일
0

자바스크립트에 Class가 나오기전에 사용하던 4가지 Class선언방식이 있다.

1. Functional 함수를 이용해 찍어내는 방식

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

instanceResult에 move라는 메소드를 추가해준다.
function내부에 있는 this는 instanceResult를 뜻하므로 this.position은
instanceResult.position과 같고, 실행시 position값이 1만큼 증가한다.

var car1 = Car();
var car2 = Car(); // 이렇게 새로운 자동차들을 찍어낼 수 있다.
car1.move();

생성자함수의 인자로 받아서 초기값을 지정해 줄 수도 있다.

var Car = function(**position**) {
  var instanceResult = {};
  instanceResult.position = **position**;
  instanceResult.move = funtion(){
    this.position +=1;
  }
  return instanceResult;

2.Function Shared

var Car = function(position) {
  var instanceResult = {
    position : position,
  };
  return instanceResult;
};

먼저 Car함수를 선언해 준다.
instanceResult.position이 아니라
바로 position 속성으로 넣어주었다.

그리고 모든 메소드들을 담아줄 객체를 만든다.

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

그리고 이 instanceResult와 methods를 합치는
extends함수를 만들어서 Car함수 내부에서 합쳐준다.

//연결시키는 extend함수
var extend = function(to, from) {
  for(var key in from){
    to[key] = from[key];
  }
};

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

var Car = function(position) {
  var instanceResult = {
    position : position,
  };
  // 연결시키는 extend함수 실행
  extend(instanceResult, methods)
  return instanceResult;
};

var car1 = Car(5); // 같은 결과가 나온다.

3. Prototypal

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

var Car = function(position) {
  var instanceResult = {};
  instanceResult.position = position;
return instanveResult;
};

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

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

var Car = function(position) {
  var instanceResult = **Object.create(methods);** // 이부분만 바꿨다.
  instanceResult.position = position;
return instanveResult;
};

var car1 = Car(5); // 같은 결과가 나온다.

자세한 정보는 아래 레퍼런스 참고
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create

4.Pseudoclassical

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

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

var car1 = new Car(5) // 같은결과가 나온다.
profile
연습과 자신감

0개의 댓글