JavaScript의 객체 생성 패턴에 대한 짧은 가이드

객체 생성 메커니즘은 기존 코드의 유연성과 재사용을 증가시킵니다. 이 게시물에서는 JavaScript의 객체 생성 패턴을 볼 것입니다.


개체를 만드는 몇 가지 패턴은 다음과 같습니다.

공장 패턴

생성자 패턴

프로토타입 패턴

생성자/프로토타입 패턴

공장 패턴

팩토리 패턴은 함수를 사용하여 특정 객체를 생성하고 해당 참조를 반환하는 프로세스를 추상화합니다. 호출될 때마다 새 인스턴스를 반환합니다.

function createFruit(name) {
    const obj = new Object(); 
    obj.name = name; 
    obj.showName = function () {
        console.log("I'm " + obj.name); 
    }
    return obj; 
}

const fruitOne = createFruit('Apple'); 
const fruitTwo = createFruit('Orange'); 

fruitOne.showName(); // I'm Apple
fruitTwo.showName(); // I'm Orange

생성자 패턴

생성자 패턴에서는 함수에서 인스턴스를 반환하는 대신 함수 이름과 함께 new 연산자를 사용합니다.

function createFruit(name) {
    this.name = name; 
    this.showName = function () {
        console.log("I'm " + this.name); 
    }
}

const fruitOne = new createFruit('Apple'); 
const fruitTwo = new createFruit('Orange'); 

fruitOne.showName(); // I'm Apple
fruitTwo.showName(); // I'm orage

프로토타입 패턴

프로토타입 패턴은 모든 인스턴스에서 사용 가능하고 공유되는 속성에 객체의 속성을 추가합니다.

function Fruit(name) {
    this.name = none; 
}

Fruit.prototype.showName = function() {
    console.log("I'm " + this.name); 
}

const fruitOne = new Fruit('Apple'); 
fruitOne.showName(); // I'm Apple

const fruitTwo = new Fruit('Orange'); 
fruitTwo.showName(); // I'm Orange

생성자/프로토타입 패턴

이것은 생성자와 프로토타입 패턴의 조합입니다. 생성자 패턴은 개체 속성을 정의하고 프로토타입 패턴은 메서드와 공유 속성을 정의합니다.

function Fruit() { }

Fruit.prototype.name = name; 
Fruit.prototype.showName = function () {
    console.log("I'm " + this.name); 
}

const fruit = new Fruit(); 
fruit.name = 'Apple'; 
fruit.showName(); // I'm Apple

😎읽어주셔서 감사합니다 | 즐거운 코딩하세요😊