JavaScript ES2015의 객체 상속 패턴

키 테이크 아웃

ES2015를 사용하면 JavaScript는 이제 코드를 깨끗하게 유지하고 계층 깊이 깊이를 최소화하며 중복 코드를 피하기 위해 클래스를 정의하는 구문을 가지고 있습니다. 일부 고전적인 OOP 언어가 지원하는 기능인 다중 상속은 여러 기본 클래스에서 상속되는 클래스를 생성 할 수 있습니다. 그러나 두 부모 클래스가 동일한 방법을 정의하는 다이아몬드 문제로 고통 받고 있습니다.

방법 만 포함하는 작은 클래스는 다이아몬드 문제를 피하는 데 사용되는 또 다른 전략입니다. 이 클래스를 연장하는 대신 믹스 인은 다른 클래스에 포함됩니다.

클래스 구문에도 불구하고 JavaScript가 클래스 기반 OOP 언어라는 환상을 제공하지만 그렇지 않습니다. 대부분의 접근 방식은 여러 상속을 모방하기 위해 객체의 프로토 타입을 수정해야합니다. 클래스 팩토리 기능을 사용하는 것은 Mixins를 사용하여 클래스를 작성하는 데 허용되는 전략입니다.

• ES2015 (이전의 ES6)가 오랫동안 기다려온 JavaScript에는 구문이 장착되어 클래스를 정의합니다. 이 기사에서는 클래스 구문을 활용하여 더 작은 부분에서 클래스를 작성할 수 있는지 살펴 보겠습니다.
. 계층 깊이를 최소로 유지하는 것은 코드를 깨끗하게 유지하는 데 중요합니다. 수업을 나누는 방법에 대해 똑똑한 것이 도움이됩니다. 대형 코드베이스의 경우 하나의 옵션은 작은 부품으로 클래스를 만드는 것입니다. 수업 구성. 중복 코드를 피하는 일반적인 전략이기도합니다 우리는 플레이어가 동물의 세계에 사는 게임을 만들고 있다고 상상해보십시오. 어떤 사람들은 친구이고, 다른 사람들은 적대적입니다 (나 같은 개 사람은 모든 고양이가 적대적인 생물이라고 말할 수 있습니다). 우리는 동물을 확장하여 고양이의 기본 클래스 역할을하는 클래스 호스 틸리안을 만들 수 있습니다. 어느 시점에서, 우리는 인간에게 해를 끼칠 수 있도록 설계된 로봇을 추가하기로 결정했습니다. 우리가하는 첫 번째 일은 로봇 클래스를 만드는 것입니다. 이제 비슷한 속성을 가진 두 개의 클래스가 있습니다. 예를 들어 Hostileanimal과 Robot은 모두 ()를 공격 할 수 있습니다. 우리가 어떻게 든 별도의 클래스 나 대상에서 적대감을 정의 할 수 있다면 적대적이라고 말하면 두 고양이 모두 로봇으로 재사용 할 수 있습니다. 우리는 다양한 방식으로 그렇게 할 수 있습니다.
다중 상속 는 일부 고전적인 OOP 언어 지원 기능입니다. 이름에서 알 수 있듯이 여러 기본 클래스에서 상속되는 클래스를 만들 수 있습니다. CAT 클래스가 다음 파이썬 코드에서 여러 기본 클래스를 어떻게 확장하는지 확인하십시오.
• an 인터페이스 는 (TYPED) Classical OOP 언어의 일반적인 기능입니다. 클래스에 포함 해야하는 방법 (및 때로는 속성)을 정의 할 수 있습니다. 해당 클래스가 그렇지 않으면 컴파일러가 오류가 발생합니다. CAT가 Attack () 또는 walk () 메소드가없는 경우 다음 TypeScript 코드는 오류가 발생합니다.

  <span>class Animal(object):
  </span>  <span>def walk(self):
  </span>    <span># ...
  </span>
  <span>class Hostile(object):
  </span>  <span>def attack(self, target):
  </span>    <span># ...
  </span>
  <span>class Dog(Animal):
  </span>  <span># ...
  </span>
  <span>class Cat(Animal, Hostile):
  </span>  <span># ...
  </span>
  dave <span>= Cat();
  </span>dave<span>.walk();
  </span>dave<span>.attack(target);
  </span>

  다중 상속은 다이아몬드 문제로 고통받습니다 (여기서 두 부모 클래스는 동일한 방법을 정의합니다). 일부 언어는

  mixins 와 같은 다른 전략을 구현 하여이 문제를 피합니다. Mixins는 방법 만 포함하는 작은 클래스입니다. 이 클래스를 연장하는 대신 Mixins는 다른 클래스에 포함됩니다. 예를 들어 PHP에서 Mixins는 특성을 사용하여 구현됩니다 <: :> a 요약 : ES2015 클래스 구문 ES2015 클래스에 뛰어 들거나 충분히 알지 못한다고 생각한다면 Jeff Mott의 객체 지향 JavaScript를 읽으십시오. 계속하기 전에 ES6 클래스에 대한 깊은 다이빙. > 간단히 말해서 :

  클래스 foo {...}}이라는 클래스가 foo <span>interface Hostile { </span> <span>attack(); </span><span>} </span> <span>class Animal { </span> <span>walk(); </span><span>} </span> <span>class Dog extends Animal { </span> <span>// ... </span><span>} </span> <span>class Cat extends Animal implements Hostile { </span> <span>attack() { </span> <span>// ... </span> <span>} </span><span>} </span>를 설명합니다. 클래스 foo 확장 막대 {...}는 다른 클래스를 확장하는 클래스, foo를 설명합니다.

  클래스 블록 내에서 해당 클래스의 속성을 정의 할 수 있습니다. 이 기사에서는 생성자와 방법 만 이해하면됩니다.

  constructor () {... ...}는 생성시 실행되는 예약 된 함수입니다 (new foo ()) foo () {...} foo 라는 메소드를 만듭니다

  클래스 구문은 대부분 JavaScript의 프로토 타입 모델보다 구문 설탕입니다. 클래스를 작성하는 대신 기능 생성자를 만듭니다 :

  여기서 테이크 아웃은 JavaScript가 클래스 기반 OOP 언어가 아니라는 것입니다. 구문이 기만적이라고 주장 할 수도 있습니다. ES2015 클래스 작성 오류를 던지는 더미 메소드를 만들어 인터페이스를 모방 할 수 있습니다. 상속되면 오류를 피하기 위해 함수를 재정의해야합니다.

  이전에 제안한 바와 같이,이 접근법은 상속에 의존합니다. 여러 클래스를 상속하기 위해서는 여러 상속 또는 믹스 인이 필요합니다.
  또 다른 접근법은 클래스가 정의 된 후 클래스를 검증하는 유틸리티 함수를 작성하는 것입니다. 이에 대한 예는 잠시만 기다릴 수 있습니다. JavaScript는 여러 상속을 지원합니다! Andrea Giammarchi에 의해. 섹션“기본 개체. 이식 함수 점검”을 참조하십시오 여러 상속 및 믹스 인을 적용하는 다양한 방법을 탐색 할 시간. 아래의 모든 검사 전략은 Github에서 이용 가능합니다 object.assign (childclass.prototype, mixin ...) ES2015 이전, 우리는 상속을 위해 프로토 타입을 사용했습니다. 모든 기능에는 프로토 타입 속성이 있습니다. New MyFunction ()을 사용하여 인스턴스를 생성 할 때 프로토 타입이 인스턴스의 속성에 복사됩니다. 인스턴스에없는 속성에 액세스하려고 할 때 JavaScript 엔진은 프로토 타입 객체에서이를 찾아 보려고합니다. 를 시연하려면 다음 코드를 살펴보십시오

  <span>class Animal(object):
  </span>  <span>def walk(self):
  </span>    <span># ...
  </span>
  <span>class Hostile(object):
  </span>  <span>def attack(self, target):
  </span>    <span># ...
  </span>
  <span>class Dog(Animal):
  </span>  <span># ...
  </span>
  <span>class Cat(Animal, Hostile):
  </span>  <span># ...
  </span>
  dave <span>= Cat();
  </span>dave<span>.walk();
  </span>dave<span>.attack(target);
  </span>

  클래스 방법은

  열거 할 수 없기 때문에 위의 것은 작동하지 않습니다. 실제로 이것은 Object.Assign (...)을 수업에서 복사하지 않습니다. 또한 한 클래스에서 다른 클래스로 메소드를 복사하는 함수를 작성하기가 어렵습니다. 그러나 각 방법을 수동으로 복사 할 수 있습니다 또 다른 방법은 클래스를 버리고 믹스 인으로 개체를 사용하는 것입니다. 긍정적 인 부작용은 Mixin 객체를 인스턴스를 생성하는 데 사용하여 오용을 방지 할 수 없다는 것입니다.

  pros

  <span>interface Hostile {
  </span>  <span>attack();
  </span><span>}
  </span>
  <span>class Animal {
  </span>  <span>walk();
  </span><span>}
  </span>
  <span>class Dog extends Animal {
  </span>  <span>// ...
  </span><span>}
  </span>
  <span>class Cat extends Animal implements Hostile {
  </span>  <span>attack() {
  </span>    <span>// ...
  </span>  <span>}
  </span><span>}
  </span>

  믹스 인을 초기화 할 수 없습니다

  <span>class Animal {
  </span>  <span>// ...
  </span><span>}
  </span>
  <span>trait Hostile {
  </span>  <span>// ...
  </span><span>}
  </span>
  <span>class Dog extends Animal {
  </span>  <span>// ...
  </span><span>}
  </span>
  <span>class Cat extends Animal {
  </span>  <span>use Hostile;
  </span>  <span>// ...
  </span><span>}
  </span>
  <span>class Robot {
  </span>  <span>use Hostile;
  </span>  <span>// ...
  </span><span>}
  </span>

  단점

  에는 추가 코드 라인 가 필요합니다 object.assign ()은 약간 모호합니다 ES2015 클래스와 함께 일하기 위해 프로토 타입 상속을 재창조

  생성자에서 객체를 구성합니다 ES2015 클래스를 사용하면 생성자의 개체를 반환하여 인스턴스를 재정의 할 수 있습니다.
  • 우리는 해당 기능을 활용하여 서브 클래스 내부의 여러 클래스에서 객체를 작성할 수 있습니다. Object.Assign (...)은 여전히 ​​Mixin 클래스와 잘 작동하지 않으므로 여기서도 객체를 사용했습니다.
  이것은 위의 컨텍스트에서 클래스 (발포 불가능한 방법)를 나타 내기 때문에 Object.Assign (..., this)는 CAT의 방법을 복사하지 않습니다. 대신 Object.Assign ()를 적용 할 수 있도록이를 명시 적으로 설정해야합니다.
  이 접근법은 실용적이지 않습니다. 인스턴스 대신 새 객체를 반환하기 때문에 다음과 같은 것과 같습니다.

  우리는 후자가 더 읽기 쉽다는 데 동의 할 수 있다고 생각합니다.

  pros
  • 작동합니다
  • 단점
  매우 모호한
  • ES2015 Class Syntax의 혜택 혜택 ES2015 클래스의 오용

  클래스 공장 함수 이 접근법은 런타임에서 클래스를 정의 할 수있는 JavaScript의 능력을 활용합니다. 먼저, 기본 클래스가 필요합니다. 이 예에서 동물과 로봇은 기본 클래스 역할을합니다. 처음부터 시작하고 싶다면 빈 수업도 작동합니다.

  다음, 우리는 매개 변수로 전달되는 클래스베이스를 확장하는 새로운 클래스를 반환하는 공장 함수를 만들어야합니다. 이것들은 믹스 인입니다 :

  <span>class Foo {}
  </span><span>console.log(typeof Foo); // "function"
  </span>

  이제 우리는 적대적인 기능으로 전달할 수 있으며,이 기능을 결합한 새로운 클래스를 반환 할 수 있습니다.

  우리는 여러 클래스를 통해 여러 믹스 인을 적용 할 수 있습니다.

  객체를 기본 클래스로 사용할 수도 있습니다.

  <span>class IAnimal {
  </span>  <span>walk() {
  </span>    <span>throw new Error('Not implemented');
  </span>  <span>}
  </span><span>}
  </span>
  <span>class Dog extends IAnimal {
  </span>  <span>// ...
  </span><span>}
  </span>
  <span>const robbie = new Dog();
  </span>robbie<span>.walk(); // Throws an error
  </span>

  pros

  모든 정보가 클래스 선언 헤더에 있기 때문에 이해하기 쉽습니다.

  <span>function <span>MyFunction</span> () {
  </span>  <span>this.myOwnProperty = 1;
  </span><span>}
  </span><span>MyFunction.prototype.myProtoProperty = 2;
  </span>
  <span>const myInstance = new MyFunction();
  </span>
  <span>// logs "1"
  </span><span>console.log(myInstance.myOwnProperty);
  </span><span>// logs "2"
  </span><span>console.log(myInstance.myProtoProperty);
  </span>
  <span>// logs "true", because "myOwnProperty" is a property of "myInstance"
  </span><span>console.log(myInstance.hasOwnProperty('myOwnProperty'));
  </span><span>// logs "false", because "myProtoProperty" isn’t a property of "myInstance", but "myInstance.__proto__"
  </span><span>console.log(myInstance.hasOwnProperty('myProtoProperty'));
  </span>

  단점

  런타임에 클래스를 만드는 것은 시작 성능 및/또는 메모리 사용에 영향을 줄 수 있습니다
  결론 이 주제를 연구하고 그것에 관한 기사를 작성하기로 결정했을 때, 나는 JavaScript의 프로토 타입 모델이 클래스 생성에 도움이 될 것으로 기대했습니다. 클래스 구문은 방법을 활성화 할 수 없게 만들기 때문에 객체 조작은 훨씬 어려워지고 거의 비현실적입니다.
  클래스 구문은 JavaScript가 클래스 기반 OOP 언어라는 환상을 만들 수 있지만 그렇지 않습니다. 대부분의 접근 방식을 사용하면 여러 상속을 모방하기 위해 객체의 프로토 타입을 수정해야합니다. 클래스 팩토리 기능을 사용하는 마지막 접근법은 Mixins를 사용하여 클래스를 작성하는 데 허용되는 전략입니다. 프로토 타입 기반 프로그래밍이 제한적이면 사고 방식을보고 싶을 수도 있습니다. 프로토 타입은 이용할 수있는 비교할 수없는 유연성을 제공합니다. 어떤 이유로 든 여전히 클래식 프로그래밍을 선호하는 경우 JavaScript로 컴파일하는 언어를 살펴 보는 것이 좋습니다. 예를 들어, TypeScript는 다른 고전적인 OOP 언어에서 인식 할 정적 타이핑 및 패턴을 추가하는 (선택 사항) JavaScript의 슈퍼 세트입니다. 프로젝트에서 위의 접근 방식 중 하나를 사용할 건가요? 더 나은 접근 방식을 찾았습니까? 의견에 알려주십시오!

  이 기사는 Jeff Mott, Scott Molinari, Vildan Softic 및 Joan Yin이 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! JavaScript ES2015 객체 상속에 대한 자주 묻는 질문

  JavaScript의 고전적인 상속과 프로토 타입 상속의 차이점은 무엇입니까?

  종종 Java 및 C와 같은 언어에 사용되는 고전적인 상속은 클래스를 기반으로합니다. 클래스는 객체에 대한 청사진을 정의하고 객체는 클래스의 인스턴스입니다. 상속은 슈퍼 클래스에서 서브 클래스를 생성하여 달성됩니다. 반면에 JavaScript는 객체가 다른 객체에서 직접 상속되는 프로토 타입 상속을 사용합니다. 런타임에서 객체를 동적으로 확장하거나 동적으로 변경할 수 있으므로 이것은 더 유연합니다.

  JavaScript ES2015의 '슈퍼'키워드는 어떻게 작동합니까?

  JavaScript ES2015의 '슈퍼'키워드가 사용됩니다. 객체의 부모에게 호출 기능. 생성자에 사용될 때 '슈퍼'키워드는 단독으로 나타나며 '이'키워드를 사용하기 전에 사용해야합니다. 'Super'키워드는 메소드 내에서 부모 객체에서 함수를 호출하는 데 사용될 수도 있습니다. JavaScript의 '프로토 타입'이란 무엇이며 상속에 어떻게 사용됩니까?

  JavaScript에서는 모든 기능과 객체에는 '프로토 타입'속성이 있습니다. 이 속성은 다른 객체 인 프로토 타입 객체에 대한 참조입니다. 함수가 만들어지면 프로토 타입 객체도 기능의 프로토 타입 속성을 통해 만들어 링크됩니다. 생성자 함수를 사용하여 객체가 생성되면 생성자의 프로토 타입에서 특성과 메소드를 상속합니다.

  JavaScript는 여러 상속을 어떻게 처리합니까?
  JavaScript는 여러 상속을 직접 지원하지 않습니다. 그러나 믹스 인을 사용하여 간접적으로 달성 할 수 있습니다. Mixin은 한 객체에서 다른 물체로의 특성을 복사하는 기술입니다. 이를 통해 객체가 여러 소스에서 속성과 방법을 상속 할 수 있습니다.

  JavaScript ES2015의 '생성자'는 무엇이며 상속에 어떻게 사용됩니까?

  JavaScript ES2015에서 생성자는 A입니다. 클래스 내에서 객체를 작성하고 초기화하는 데 사용되는 특수 메소드. 상속의 맥락에서, 서브 클래스 생성자는 '이'키워드를 사용하기 전에 '슈퍼'키워드를 사용하여 슈퍼 클래스 생성자를 호출해야합니다. >

  JavaScript ES2015의 'Extends'키워드는 슈퍼 클래스에서 서브 클래스를 만드는 데 사용됩니다. 서브 클래스는 슈퍼 클래스의 모든 특성과 방법을 상속하지만 새 특성과 방법을 추가하거나 상속 된 것들을 무시할 수 있습니다.

  JavaScript에서 '클래스'와 '프로토 타입'의 차이점은 무엇입니까? > JavaScript에서 '클래스'는 객체를 만들기위한 청사진으로 사용되는 함수 유형입니다. 해당 데이터에서 작동하는 데이터와 기능을 캡슐화합니다. 반면에 '프로토 타입'은 다른 객체가 속성과 방법을 상속하는 객체입니다.

  JavaScript ES2015의 서브 클래스에서 메소드를 어떻게 재정의 할 수 있습니까? 서브 클래스에서 동일한 이름의 메소드를 단순히 정의하여 서브 클래스의 메소드를 대체 할 수 있습니다. 서브 클래스 인스턴스에서 호출 될 때 상속 된 방법 대신 새 방법이 사용됩니다.

  JavaScript의 '새로운'키워드는 무엇이며 상속에 어떻게 사용됩니까?
  JavaScript의 '새'키워드는 클래스 또는 생성자 함수의 인스턴스를 만드는 데 사용됩니다. 상속의 맥락에서, '새로운'키워드는 슈퍼 클래스에서 속성과 메소드를 상속하는 서브 클래스 인스턴스를 만드는 데 사용됩니다.

  JavaScript의 객체의 프로토 타입에 속성을 어떻게 추가 할 수 있습니까?

  JavaScript에서는 프로토 타입 객체의 속성에 값을 단순히 할당하여 객체의 프로토 타입에 속성을 추가 할 수 있습니다. 이 속성은 생성자 함수에서 생성 된 모든 객체에 의해 상속됩니다.

위 내용은 JavaScript ES2015의 객체 상속 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!