데코레이터란 무엇이며 JavaScript에서 어떻게 사용됩니까?

이 튜토리얼에서는 JavaScript 데코레이터에 대해 배우고 내부 작동 방식과 사용법을 이해합니다.

JavaScript의 데코레이터란 무엇인가요?

데코레이터라는 단어는 한 세트의 코드 또는 프로그램을 다른 코드 또는 프로그램 세트와 결합하는 것을 의미합니다. 또는 기능을 확장하거나 해당 기능의 작동을 확장하기 위해 함수를 다른 함수로 래핑한다고 말할 수도 있습니다. 데코레이터는 데코레이터 함수라고도 합니다.

개발자들은 Python, C#과 같은 다른 언어에서도 이 데코레이터 용어를 사용해 왔으며 이제 JavaScript에도 데코레이터가 도입되었습니다.

함수 데코레이터

JavaScript에서 함수는 객체처럼 동작하므로 일급 객체라고도 합니다. 이는 함수를 변수에 할당하거나 함수에서 함수를 반환하거나 함수에 매개변수로 함수를 전달할 수 있기 때문에 발생합니다.

예

으아악

예

함수를 다른 함수에 전달

으아악

예

다른 함수를 통해 함수 반환

으아악

고차 함수

고차 함수는 함수를 매개변수로 사용하고 일부 작업을 수행한 후 해당 함수를 반환하는 함수입니다. 위에서 설명한 함수는 printAdditionFunc라는 고차 함수입니다.

예

으아악

고차 함수로 데코레이터가 이미 있는데 왜 별도의 데코레이터가 필요한 걸까요?

그래서 우리는 고차 JavaScript 함수인 함수 데코레이터를 가지고 있지만 클래스가 JavaScript에 나타날 때 데코레이터와 마찬가지로 고차 함수가 실패하는 클래스 내 함수도 있습니다.

예

클래스의 고차함수 문제를 살펴보겠습니다 -

으아악

여기서 일어나는 일은 상위 함수가 호출되면 클래스의 멤버 함수인 인수를 여기서 websiteName 함수로 호출한다는 것입니다. websiteName 함수는 외부 클래스 함수에서 호출되므로 함수 값은 websiteName 함수 내에서 정의되지 않습니다. 이것이 바로 이 로그 오류의 원인입니다.

그래서 이 문제를 해결하기 위해 우리는 궁극적으로 이것의 가치를 갖게 될 클래스 객체 Website를 전달할 것입니다.

으아악

PrintName 함수에서는 웹사이트 클래스 개체의 도움으로 websiteName 함수를 호출하는 호출 함수를 통해 arg(websiteName 함수)를 호출하므로 이 포인터의 값은 웹사이트 클래스의 개체가 되며 fname과 lname을 갖습니다. 변수가 있으므로 오류 없이 제대로 작동합니다.

이 기사를 통해 데코레이터와 그 용도를 이해하시기 바랍니다.

위 내용은 데코레이터란 무엇이며 JavaScript에서 어떻게 사용됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!