instantiation Patterns(상속패턴)

박동건·2020년 1월 2일
1

JavaScript

목록 보기
4/8

instantiation Patterns(상속패턴)

  • class는 하나의 정형화된 모델을 만들어 두고, 그 모델을 기반으로 인스턴스를 만들기 위해 사용.

  • javascript에 class가 나오기 전에 사용하던 4가지 class선언 방식

    1. Functional
    2. Functional-shared
    3. Prototypal
    4. Pseudoclassical

1. Functional

var animal = function(position) { 
  var someInstance = {}
  someInstance.position = position // 파라미터를 초기값으로 넣을 수도 있다.
  someInstance.move = function() {
    this.position += 1
  } 
  return someInstance
}

var animal1 = animal(5) // position: 5
animal1.move() // position: 6

2. Functional-shared

// 기본 형태에서 순서대로 따라가면 된다.

var extend = function(to, from) { // 3. someInstance 와 animalMethods를 합치는 함수 생성
  for (var key in from) {
    to[key] = from[key]
  }
}

var animalMethods = {} // 2. 메서드를 담아둘 객체 생성
animalMethods.move = function() {
  this.position += 1
}

var animal = function(position) {
  var someInstance = { 
    position: position // 1. someInstance의 프로퍼티로 넣어준다.
  }
  extend(someInstance, animalMethods) // 4. 내부에서 합쳐준다.
  return someInstance
}

3. Prototypal

// Functional-shared 방식과 비슷하다.

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

var animal = function(position) {
  var someInstance = Object.create(animalMethods) // 특정 객체를 프로토타입으로 생성 
  someInstance.position = position
  return someInstance
}

4. Pseudoclassical

// 가장 많이 쓰이는 방법

var animal = function(position) {
  this.position = position
}

animal.prototype.move = function() { // 메서드를 프로토타입으로 만들어 준다.
  this.position += 1
}

var animal1 = new animal(5) // new operator를 붙여야 한다. 
                            // position: 5

animal1.move() // position: 6
// 가장 많이 쓰는 방법이라 더 알아보자.

var Animal = function(position) {
  this.position = position
}

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

var Dog = function () {
  Animal.call(this);

  this.age = 5;  
};

// Dog는 부모객체인 Animal.prototype을 copy하여 참조할 수 있게 해준다.
Dog.prototype = Object.create(Animal.prototype);

// Constructor를 Dog 자신에게 할당해준다.
Dog.prototype.constructor = Dog;


profile
박레고의 개발 블로그

0개의 댓글