JS 클래스, 생성자 및 팩토리 함수를 사용하는 방법-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-04-14 11:02:56

원래의

1669명이 탐색했습니다.

이번에는 JS 클래스, 생성자, 팩토리 함수 사용법을 알려드리겠습니다. JS클래스, 생성자, 팩토리 함수 사용 시 주의 사항은 무엇인지 살펴보겠습니다.

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. 새로운 키워드가 필요해요

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

rreee

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

2. 인스턴스화 프로세스 중 세부 정보는 외부 API

에 노출됩니다. 모든 호출은 생성자의 구현과 밀접하게 관련되어 있습니다. 생성 과정에서 무언가를 해야 한다면 매우 번거로운 일이 될 것입니다.

3. 생성자는 개방/폐쇄 규칙을 따르지 않습니다

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

저는 클래스와 팩토리 함수가 너무 유사해서 클래스 함수를 팩토리 함수로 업그레이드해도 아무런 영향이 없지만 JavaScript에서는 영향이 있다는 점에 의문을 제기한 적이 있습니다.

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

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

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

로그인 후 복사

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

4. 생성자를 사용하여 인스턴스에 기회를 제공하세요

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

instanceof는 거짓말을 할 것입니다.

rreee

instanceof는 다른 강력한 형식의 언어처럼 확인하지 않고 프로토타입 체인의 개체만 확인합니다.

Constructor.prototype을 변경하는 경우와 같은 일부 실행 컨텍스트에서는 실패합니다.

또 다른 예는 생성자나 클래스로 시작한 다음 이를 다른 개체로 확장하는 것입니다. 위의 상황과 마찬가지로 팩토리 함수로 다시 작성되었습니다. 이 시점에서 instanceof에도 문제가 있습니다.

전체적으로, instanceof는 생성자와 팩토리 함수 호출의 또 다른 큰 변화입니다.

수업 이용 혜택

편리하고 독립적인 키워드
는 JavaScript로 클래스를 구현하는 유일하고 권위 있는 방법입니다.
클래스 언어 개발 경험이 있는 다른 개발자들에게도 좋은 경험이 될 것입니다.

수업 이용의 단점

생성자에 대한 모든 나쁜 점과 다음 사항도 포함됩니다.

확장 키워드를 사용하여 문제가 있는 클래스를 만드는 것은 사용자에게 큰 유혹입니다.
클래스의 계층적 상속은 취약한 기본 클래스(상속으로 인해 기본 클래스가 파괴됨), 고릴라 바나나 등 많은 유명한 문제를 야기합니다. 문제(복잡한 컨텍스트가 섞인 객체), 필요에 따른 복제(상속이 다양해지면 수시로 클래스를 수정해야 함) 등

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

팩토리 함수 사용의 이점

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

1. 프로토타입이 포함된 모든 객체를 반환하세요

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

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

2. 복잡한 리팩토링 걱정은 NO

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

3. 신규 없음

새 객체를 생성하기 위해 new 키워드를 사용하지 않고, 이 프로세스를 직접 마스터할 수 있습니다.

4. 이 행동을 표준으로 삼으세요

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