ES6 클래스로 함수를 확장할 때 함수 호출에서 클래스 인스턴스에 액세스하는 방법

ES6 클래스로 함수 확장

ES6에서 프로그래머는 함수를 포함한 특수 개체를 확장할 수 있습니다. 상속을 사용하면 함수에서 클래스를 파생시키는 것이 가능해집니다. 이러한 확장 개체는 함수처럼 호출될 수 있지만 이러한 호출에 적절한 논리를 구현하는 것은 어려울 수 있습니다.

이 시나리오에서는 한 가지 중요한 질문이 발생합니다. 개체가 호출될 때 클래스 인스턴스에 대한 참조를 얻는 방법입니다. 함수로서 일반 메서드가 이를 통해 액세스할 수 있다는 점을 고려하면 어떻게 될까요? 불행하게도 이 참조는 이러한 경우 전역 개체(창)를 가리킵니다.

해결책:

이 문제를 해결하기 위해 클로저 개념을 사용할 수 있습니다. 인스턴스 변수에 대한 액세스를 캡슐화하는 반환된 함수를 생성합니다. 그림은 다음과 같습니다.

class Smth extends Function {
  constructor(x) {
    super(() => { return x; });
  }
}

이 예에서 생성자 내의 super 표현식은 실행할 코드를 나타내는 문자열이 필요한 함수 생성자를 시작합니다. 그러나 인스턴스 데이터에 액세스하는 것은 간단하지 않으므로 하드코딩된 접근 방식을 채택하여 원하는 결과를 얻습니다.

console.log((new Smth(256))()); // Logs: 256

동일한 목표를 달성하기 위한 대체 접근 방식에는 프로토타입 체인을 조작하는 것이 포함됩니다.

class Smth extends Function {
  constructor(x) {
    const smth = function() { return x; };
    Object.setPrototypeOf(smth, Smth.prototype);
    return smth;
  }
}

이 방법은 반환된 함수가 인스턴스 변수에 액세스할 수 있는 클로저가 되도록 허용하여 더 큰 유연성을 제공합니다.

게다가 이 기능을 재사용 가능한 유틸리티로 추상화하는 것도 가능합니다.

class ExtensibleFunction extends Function {
  constructor(f) {
    return Object.setPrototypeOf(f, new.target.prototype);
  }
}

class Smth extends ExtensibleFunction {
  constructor(x) {
    super(() => { return x; });
  }
}

이 접근 방식은 상속 계층 구조에 추가 수준의 간접 참조를 생성하지만 특정 시나리오에서는 유용할 수 있습니다. 또한 다음 구성을 활용하여 이를 방지할 수 있습니다.

function ExtensibleFunction(f) {
  return Object.setPrototypeOf(f, new.target.prototype);
}
ExtensibleFunction.prototype = Function.prototype;

그러나 이 경우 Smth는 정적 함수 속성을 동적으로 상속하지 않습니다.

위 내용은 ES6 클래스로 함수를 확장할 때 함수 호출에서 클래스 인스턴스에 액세스하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!