ES6 클래스에서 함수를 확장하는 방법: \'this\' 및 클로저 기술 탐색

Barbara Streisand
풀어 주다: 2024-10-21 06:02:30
원래의
812명이 탐색했습니다.

How to Extend Functions in ES6 Classes: Navigating 'this' and Closure Techniques

ES6 클래스로 함수 확장: 'this' 및 클로저 트릭 이해

ES6에서 특수 객체를 확장하면 함수에서 상속이 가능해집니다. 함수로 호출됩니다. 그러나 이러한 호출에 대한 논리를 구현하려면 'this' 참조를 신중하게 고려해야 합니다.

기본적으로 클래스 인스턴스에서 메서드가 호출되면 'this'는 인스턴스 자체를 가리킵니다. 그러나 함수가 직접 호출될 때 'this'는 전역 개체(예: 창)를 참조합니다. 이 문제를 해결하기 위한 두 가지 옵션이 있습니다:

1. 생성자의 데이터 하드코딩:

'super' 호출은 코드 문자열을 예상하여 함수 생성자를 호출할 수 있습니다. 인스턴스 데이터에 액세스하려면 다음과 같이 하드코딩하면 됩니다.

class Smth extends Function {
  constructor(x) {
    super("return " + JSON.stringify(x) + ";");
  }
}
로그인 후 복사

2. 클로저 및 클로저 래퍼:

보다 유연한 솔루션을 위해 인스턴스 데이터를 반환된 함수에 할당하는 클로저를 생성해야 합니다.

class Smth extends Function {
  constructor(x) {
    function smth() { return x; }
    Object.setPrototypeOf(smth, Smth.prototype);
    return smth;
  }
}
로그인 후 복사

이 기능을 추상화하려면 'ExtensibleFunction' 클래스를 도입할 수 있습니다:

class ExtensibleFunction extends Function {
  constructor(f) {
    return Object.setPrototypeOf(f, new.target.prototype);
  }
}
로그인 후 복사

하위 클래스는 ExtensibleFunction에서 상속할 수 있습니다:

class Smth extends ExtensibleFunction {
  constructor(x) {
    super(function() { return x; });
  }
}
로그인 후 복사

화살표 함수나 명명된 함수를 사용하면 대체 접근 방식을 제공할 수도 있습니다. 상속 행위입니다.

위 내용은 ES6 클래스에서 함수를 확장하는 방법: \'this\' 및 클로저 기술 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!