JavaScript 팩토리 함수란 무엇입니까?

JavaScript에서 팩토리 함수는 객체를 생성하는 데 사용되는 함수입니다. 이러한 내장 함수는 모두 클래스 객체이며, 호출되면 실제로는 클래스 인스턴스가 생성됩니다. 즉, 먼저 클래스를 사용하여 객체를 생성한 다음 생성된 함수는 모두 동일한 속성을 가지고 반환됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript 팩토리 함수란 무엇인가요?

그럼 "팩토리 함수"란 정확히 무엇인가요? "소위 팩토리 함수라고 불리는 것은 이러한 내장 함수가 모두 클래스 객체임을 의미합니다. 이를 호출하면 실제로 클래스 인스턴스가 생성됩니다."라는 개념을 살펴보겠습니다. 이는 이 함수를 호출할 때 실제로 클래스를 사용하여 개체를 만든 다음 해당 개체를 반환한다는 의미입니다. Javascript 자체는 엄격한 객체 지향 언어(클래스를 포함하지 않음)가 아니기 때문에 실제로 Javascript에는 엄격한 "팩토리 함수"가 없지만 Javascript에서는 함수를 사용하여 클래스를 시뮬레이션할 수 있습니다.

먼저 new 키워드를 통해 객체를 생성하는데, obj는 Object의 인스턴스와 같습니다. 클래스를 통해 객체를 인스턴스화한 다음 객체에 해당 속성을 부여하고 마지막으로 객체를 반환합니다. 이 함수를 호출하여 객체를 생성할 수 있습니다. 이 경우 팩토리 함수는 실제로 이해하기 쉽습니다.

1, 함수입니다.

2, 객체를 생성하는 데 사용됩니다.

3. "생산되는" 함수는 모두 "표준 부품"입니다(동일한 속성을 가짐).

함수와 객체를 배우고 함께 사용하지 않으면 JavaScript 프로그래머가 될 수 없습니다. 구성 요소를 구성하려면 구성이라는 강력한 개체 패러다임부터 시작해야 합니다. 오늘은 팩토리 함수를 사용하여 함수, 개체 및 약속을 구성하는 몇 가지 관용적 패턴을 살펴보겠습니다. 조합 모드는 일련의 하위 개체를 트리 구조로 구성하고 최상위 명령은 트리의 모든 개체를 작동합니다. 함수가 객체를 반환하면 이를 팩토리 함수라고 부릅니다.

간단한 예를 살펴보겠습니다.

function createJelly() { return { type: 'jelly', colour: 'red' scoops: 3 }; }

몇 가지 예를 통해 소개해보겠습니다.

이 팩토리 함수를 호출할 때마다 새로운 젤리 개체 인스턴스가 반환됩니다. 주목해야 할 중요한 점은 팩토리 함수 이름 앞에 create 를 붙일 필요는 없지만 함수의 의도를 다른 사람에게 더 명확하게 한다는 것입니다. type 속성의 경우에도 마찬가지이지만 일반적으로 프로그램의 개체를 구별하는 데 도움이 됩니다.

1. 매개변수가 있는 팩토리 함수

모든 함수와 마찬가지로, 반환된 객체의 모델을 변경하는 데 사용할 수 있는 매개변수를 통해 팩토리 함수(아이스크림 아이스크림)를 정의할 수 있습니다.

function createIceCream(flavour='Vanilla') { return { type: 'icecream', scoops: 3, flavour } }

이론적으로는 수백 개의 인수가 포함된 팩토리 함수를 사용하여 깊이 중첩된 개체의 특사를 반환할 수 있지만 앞으로 살펴보겠지만 이는 구성의 본질이 전혀 아닙니다.

2. 결합된 팩토리 함수

팩토리 함수 내에 또 다른 팩토리 함수를 정의하면 복잡한 팩토리 함수를 더 작고 재사용 가능한 조각으로 분할하는 데 도움이 될 수 있습니다.

예를 들어 이전 젤리(jelly) 및 아이스크림(아이스크림) 팩토리 함수로 정의된 디저트(디저트) 팩토리 함수를 만들 수 있습니다.

function createDessert() { return { type: 'dessert', bowl: [ createJelly(), createIceCream() ] }; }

팩토리 기능을 결합하여 임의로 복잡한 객체를 만들 수 있으며, 이를 위해서는 new 또는 this를 조합하여 사용할 필요가 없습니다. 객체는 is-a(is) 대신 has-a(has) 관계로 표현될 수 있습니다. 즉, 상속이 아닌 합성을 이용하여 구현할 수 있다.

예를 들어 상속을 사용합니다.

// A trifle *is a* dessert 蛋糕*是*甜点 function Trifle() { Dessert.apply(this, arguments); } Trifle.prototype = Dessert.prototype; // 或者 class Trifle extends Dessert { constructor() { super(); } }

조합모드를 이용하면 같은 의미로 표현할 수 있어요.

// A trifle *has* layers of jelly, custard and cream. It also *has a* topping. // 蛋糕 *有* 果冻层，奶酪层和奶油层，顶部还 *有* 装饰配料。 function createTrifle() { return { type: 'trifle', layers: [ createJelly(), createCustard(), createCream() ], topping: createAlmonds() }; }

3. 비동기 팩토리 기능

모든 팩토리가 즉시 데이터를 반환하는 것은 아닙니다. 예를 들어, 일부는 먼저 데이터를 가져와야 합니다. 이러한 경우 Promise를 반환하여 팩토리 함수를 정의할 수 있습니다.

function getMeal(menuUrl) { return new Promise((resolve, reject) => { fetch(menuUrl) .then(result => { resolve({ type: 'meal', courses: result.json() }); }) .catch(reject); }); }

깊게 중첩된 들여쓰기로 인해 비동기 팩토리를 읽고 테스트하기가 어려워질 수 있습니다. 이와 같이 작성할 수 있는 여러 다른 팩토리로 분할하는 것이 도움이 되는 경우가 많습니다.

function getMeal(menuUrl) { return fetch(menuUrl) .then(result => result.json()) .then(json => createMeal(json)); } function createMeal(courses=[]) { return { type: 'meal', courses }; }

물론 콜백 함수를 사용할 수 있지만 팩토리 함수를 정의하기 위해 Promise.all을 반환하는 Promise.all과 같은 도구가 이미 있습니다.

function getWeeksMeals() { const menuUrl = 'jsfood.com/'; return Promise.all([ getMeal(`${menuUrl}/monday`), getMeal(`${menuUrl}/tuesday`), getMeal(`${menuUrl}/wednesday`), getMeal(`${menuUrl}/thursday`), getMeal(`${menuUrl}/friday`) ]); }

우리는 이러한 팩토리가 비동기 작업을 수행하고 약속을 반환한다는 것을 보여주기 위해 명명 규칙으로 create 대신 get을 사용합니다.

관련 권장 사항:javascript 학습 튜토리얼

위 내용은 JavaScript 팩토리 함수란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!