Javascript에서 클래스, 생성자 및 팩토리 함수를 사용하는 방법

이 글은 주로 자바스크립트의 클래스, 생성자, 팩토리 함수에 대한 자세한 설명을 소개하고 있으니 필요하신 분들은 참고하시면 됩니다

ES6 시대에는 객체를 생성하는 방법이 많아졌고, 다양한 방법을 선택할 수 있게 되었습니다. 시나리오를 작성하는 방법입니다. 현재 객체를 작성하는 세 가지 주요 방법, 즉 클래스 키워드, 생성자 및 팩토리 함수가 있습니다. 이들은 모두 객체를 생성하는 수단이지만 일상적인 개발 중에는 이러한 차이점을 기준으로 선택해야 합니다.

먼저 이 세 가지 메소드가 어떤 것인지 살펴보겠습니다

// class 关键字，ES6新特性
class ClassCar {
 drive () {
  console.log('Vroom!');
 }
}
const car1 = new ClassCar();
console.log(car1.drive());
// 构造函数
function ConstructorCar () {}
ConstructorCar.prototype.drive = function () {
 console.log('Vroom!');
};
const car2 = new ConstructorCar();
console.log(car2.drive());
// 工厂函数
const proto = {
 drive () {
  console.log('Vroom!');
 }
};
function factoryCar () {
 return Object.create(proto);
}
const car3 = factoryCar();
console.log(car3.drive());

이 메소드는 모두 프로토타입 생성을 기반으로 하며 모두 생성자 함수에서 비공개 변수 구현을 지원합니다. 즉, 이러한 기능은 대부분 동일한 특성을 가지며 많은 시나리오에서 동일합니다.

Javascript에서는 모든 함수가 새 객체를 반환할 수 있습니다. 생성자나 클래스가 아닌 경우 팩토리 함수라고 합니다.

ES6 클래스는 실제로 생성자를 위한 구문 설탕입니다(적어도 이 단계에서는 이것이 구현되는 방식입니다). 따라서 다음에 논의되는 모든 내용은 생성자 및 ES6 클래스에도 적용됩니다.

class Foo {}
console.log(typeof Foo); // function

생성자와 ES6 클래스의 이점

• 대부분의 책에서는 클래스와 생성자를 사용하는 방법을 가르칩니다.

• ' this '는 새 객체를 가리킵니다.

• 새 키워드의 가독성을 좋아하시는 분들도 계세요

• 세부 사항에는 약간의 차이가 있을 수 있으나 개발 과정에서 문제가 없다면 너무 걱정하지 않으셔도 됩니다.

생성자와 ES6 클래스의 단점

1 new 키워드가 필요합니다

ES6에서는 생성자와 클래스 모두 new 키워드가 필요합니다.

function Foo() {
 if (!(this instanceof Foo)) { return new Foo(); }
}

ES6에서는 new 키워드 없이 클래스 함수를 호출하려고 하면 작업이 발생합니다. new 키워드 없이 원하는 경우 팩토리 함수를 사용하여 래핑할 수 있습니다.

2. 인스턴스화 과정의 세부 사항은 외부 API에 노출됩니다.

모든 호출은 생성자 구현과 밀접하게 관련되어 있습니다.

3. 생성자가 열기/닫기 규칙을 준수하지 않습니다.

새 키워드의 세부 처리로 인해 생성자가 열기/닫기 규칙을 위반합니다. API는 확장을 위해 열려 있어야 하며 수정을 피해야 합니다.

클래스와 팩토리 함수가 너무 비슷해서 클래스 함수를 팩토리 함수로 업그레이드해도 아무런 영향이 없지만 JavaScript에서는 영향이 있다는 질문을 받은 적이 있습니다.

생성자나 클래스 작성을 시작했지만 계속 작성하다 보면 팩토리 함수의 유연성이 필요하다는 것을 알게 됩니다. 이때 단순히 함수를 변경하고 버릴 수는 없습니다.

안타깝게도 당신은 JavaScript 프로그래머이고 생성자를 팩토리 함수로 변환하는 것은 큰 작업입니다.

// 原来的实现：
// class Car {
//  drive () {
//   console.log('Vroom!');
//  }
// }
// const AutoMaker = { Car };
// 工厂函数改变的实现：
const AutoMaker = {
 Car (bundle) {
  return Object.create(this.bundle[bundle]);
 },
 bundle: {
  premium: {
   drive () {
    console.log('Vrooom!');
   },
   getOptions: function () {
    return ['leather', 'wood', 'pearl'];
   }
  }
 }
};
// 期望中的用法是：
const newCar = AutoMaker.Car('premium');
newCar.drive(); // 'Vrooom!'
// 但是因为他是一个库
// 许多地方依然这样用:
const oldCar = new AutoMaker.Car();
// 如此就会导致:
// TypeError: Cannot read property 'undefined' of
// undefined at new AutoMaker.Car

위의 예에서는 클래스로 시작하여 최종적으로 특정 프로토타입을 기반으로 할 수 있는 클래스로 변경했습니다. 객체에 대한 팩토리 함수를 생성합니다. 이러한 함수는 인터페이스 추상화 및 특별한 요구 사항 사용자 정의에 널리 사용될 수 있습니다.

4. 생성자를 사용하여 인스턴스 오브 기회 제공

생성자와 팩토리 함수의 차이점은 인스턴스 오브 연산자입니다. 많은 사람들이 코드의 정확성을 보장하기 위해 인스턴스를 사용합니다. 하지만 솔직히 말해서 이것은 매우 문제가 많으므로, instanceof의 사용은 피하는 것이 좋습니다.

instanceof는 거짓말을 할 수 있습니다.

// instanceof 是一个原型链检查
// 不是一个类型检查
// 这意味着这个检查是取决于执行上下文的,
// 当原型被动态的重新关联,
// 你就会得到这样令人费解的情况
function foo() {}
const bar = { a: 'a'};
foo.prototype = bar;
// bar是一个foo的实例吗，显示不是
console.log(bar instanceof foo); // false
// 上面我们看到了，他的确不是一个foo实例
// baz 显然也不是一个foo的实例，对吧?
const baz = Object.create(bar);
// ...不对.
console.log(baz instanceof foo); // true. oops.

instanceof는 다른 강력한 유형의 언어처럼 검사를 수행하지 않고 프로토타입 체인의 객체만 검사합니다.

Constructor.prototype을 변경하는 경우와 같은 일부 실행 컨텍스트에서는 유효하지 않습니다.

또 다른 예는 생성자나 클래스로 시작한 다음 이를 다른 객체로 확장하는 경우입니다. 위의 상황처럼 팩토리 함수로 다시 작성됩니다. 이 시점에서 instanceof에도 문제가 있습니다.

요약하자면, instanceof는 생성자 및 팩토리 함수 호출의 또 다른 큰 변화입니다.

클래스 사용의 이점

• 편리하고 독립적인 키워드

• JavaScript에서 클래스를 구현하는 유일하고 권위 있는 방법입니다.

• 클래스 언어 개발 경험이 있는 다른 개발자들에게도 좋은 경험이 될 것입니다.

클래스 사용의 단점

생성자의 모든 단점에 다음이 추가됩니다.

extends 키워드를 사용하여 문제가 있는 클래스를 만드는 것은 사용자에게 큰 유혹입니다.
클래스의 계층적 상속은 조각난 기본 클래스(상속으로 인해 기본 클래스가 파괴됨), 고릴라 바나나 문제(복잡한 컨텍스트와 혼합된 개체), 필요에 따른 복제(클래스를 상속할 때 클래스를 상속해야 함) 등 잘 알려진 많은 문제를 야기합니다. 다양화 수시로 수정됨) 등이 있습니다.

다른 두 가지 방법으로도 이러한 문제가 발생할 수 있지만, 확장 키워드를 사용하면 환경에 따라 이 문제가 발생하게 됩니다. 즉, 재사용 가능한 코드가 아닌 융통성 없는 관계로 코드를 작성하도록 유도합니다.

팩토리 기능 사용의 이점

팩토리 함수는 클래스 및 생성자보다 유연하며 사람들을 잘못된 길로 안내하지 않습니다. 또한 깊은 상속 체인에 갇히지도 않습니다. 상속을 시뮬레이션하기 위해 다양한 방법을 사용할 수 있습니다

1. 어떤 프로토타입으로도 객체를 반환할 수 있습니다

예를 들어, 동일한 구현을 통해 다양한 인스턴스를 생성할 수 있으며, 다양한 미디어 형식에 대한 미디어 플레이어를 생성할 수 있습니다. 예, 다양한 API를 사용하여, 또는 이벤트 라이브러리는 DOM 이벤트나 ws 이벤트용일 수 있습니다.

팩토리 함수는 실행 컨텍스트를 통해 개체를 인스턴스화할 수도 있으며, 이는 개체 풀과 보다 유연한 상속 모델의 이점을 누릴 수 있습니다.

2. 복잡한 리팩토링에 대해 걱정하지 마세요

팩토리 함수를 생성자로 변환할 필요가 없으므로 리팩토링이 필요하지 않습니다.

3. new가 없으면

새 개체를 만드는 데 new 키워드가 필요하지 않으며 이 프로세스를 직접 마스터할 수 있습니다.

4. 이 동작을 표준으로 합니다

이것은 여러분에게 친숙한 것이며, 이를 사용하여 상위 객체를 가져올 수 있습니다. 예를 들어, player.create()에서 이것은 플레이어를 가리키며, 다른 것은 호출 및 적용을 통해 바인딩될 수도 있습니다.

5. 인스턴스 오브 문제 없음

6. 어떤 사람들은 새로운 것이 없이 직접 쓰는 가독성과 직관성을 좋아합니다.

팩토리 함수의 단점

• 은 프로토타입을 자동으로 처리하지 않으며, 팩토리 함수 프로토타입은 프로토타입 체인에 영향을 미치지 않습니다.

• 이것은 팩토리 함수에서 자동으로 새 객체를 가리키지 않습니다.

• 세부적으로 약간의 차이가 있을 수 있으나 개발과정에서 문제가 없다면 너무 걱정하지 않으셔도 됩니다.

결론

제 생각에는 클래스는 편리한 키워드일 수 있지만, 의심하지 않는 사용자를 상속의 함정에 빠지게 한다는 점을 숨길 수는 없습니다. 또 다른 위험은 나중에 팩토리 기능을 사용하고 싶고 매우 큰 변경을 수행해야 할 가능성입니다.

비교적 대규모 팀에서 작업하는 경우 공개 API를 수정하려는 경우 액세스할 수 없는 코드를 방해할 수 있으므로 수정된 기능의 영향을 무시할 수 없습니다.

팩토리 패턴의 가장 큰 장점 중 하나는 더 강력하고 유연할 뿐만 아니라 전체 팀이 API를 더 간단하고 안전하며 가볍게 만들도록 장려한다는 것입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

nodejs에서 웹소켓 통신 기능 구현하기

WeChat 애플릿에서 Tuya 구현하기

React 컴포넌트 외부에서 상위 컴포넌트를 사용하는 방법에 대한 자세한 해석

자세한 해석 ES6 구문 중간 반복 가능 프로토콜

위 내용은 Javascript에서 클래스, 생성자 및 팩토리 함수를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!