[JavaScript] Instantiation Patterns

Instantiation Patterns 

javascript 에서 OOP를 구현하기 위한 인스턴스화 패턴에는 다음 4가지가 있다.

 

1. Functional

•함수 내부에 빈객체를 생성
•객체에 프로퍼티와 메서드를 추가
•객체를 반환

function Animal(species, name){
    var obj = {}
    obj.species = species
    obj.name = name
    obj.info = function(){
        console.log('species :', obj.species)
        console.log('name :', obj.name)
    }

    return obj
}

var pat1 = Animal('dog', 'ddonggae')
var pat2 = Animal('cat', 'yaongee')

// species : dog
// name : ddonggae
pat1.info()

// species : cat
// name : yaongee
pat2.info()

 

2. Functional Shared

•함수 내부에 빈객체를 생성

•객체에 프로퍼티 추가

•함수 외부에 함수 내부에서 메서드를 이어받기 위한 객체 생성 후 메서드 추가 (methods 객체)

•객체의 메서드를 상속하는 확장 함수 작성 (Extend)

•함수 내부에서 외부에 있는 methods 객체를 Extend 함수를 이용해 메서드를 상속받아서 반환

function Animal(species, name){
    var obj = {}
    obj.species = species
    obj.name = name
    Extend(obj, methods)
    
    return obj
}

var methods = {}
methods.info = function(){
	console.log('species :', this.species)
	console.log('name :', this.name)
}

function Extend(to, from) {
    for(let key in from){
        to[key] = from[key]
    }
}

var pat1 = Animal('dog', 'ddonggae')
var pat2 = Animal('cat', 'yaongee')

// species : dog
// name : ddonggae
pat1.info()

// species : cat
// name : yaongee
pat2.info()

 

3. Prototypal

•Functional Shared 방식과 비슷

•함수 내부에 빈객체를 생성

•함수 내부에서 외부에 있는 객체를 상속받기 위한 Extend 함수를 따로 작성하지 않아도 됨

•Extend 함수를 대신에 Object.create()를 사용해서 객체를 상속받은

•객체에 프로퍼티 추가

•객체를 반환

function Animal(species, name) {
    var obj = Object.create(methods)
    obj.species = species
    obj.name = name

    return obj
}

var methods = {}
methods.info = function () {
    console.log('species :', this.species)
    console.log('name :', this.name)
}

var pat1 = Animal('dog', 'ddonggae')
var pat2 = Animal('cat', 'yaongee')

// species : dog
// name : ddonggae
pat1.info()

// species : cat
// name : yaongee
pat2.info()

 

4. Pseudoclassical

•생성자로 사용할 함수 작성 내부에 this 키워드를 사용해 파라미터를 이어받음

•작성한 함수의 prototype 프로퍼티를 사용해 prototype object에 필요한 프로퍼티와 메서드 추가

•new 키워드를 사용하고, 생성자로 Animal 함수를 사용해서 인스턴스화

•가장 많이 쓰이는 방법이다.

function Animal(species, name) {
    this.species = species
    this.name = name
}

Animal.prototype.info = function(){
    console.log('species :', this.species)
    console.log('name :', this.name)
}   

var pat1 = new Animal('dog', 'ddonggae')
var pat2 = new Animal('cat', 'yaongee')

// species : dog
// name : ddonggae
pat1.info()

// species : cat
// name : yaongee
pat2.info()