Was sind Dekoratoren und wie werden sie in JavaScript verwendet?

In diesem Tutorial erfahren Sie mehr über JavaScript-Dekoratoren und verstehen deren Funktionsweise und Verwendung.

Was sind Dekoratoren in JavaScript?

Das Wort „Dekorator“ bedeutet, einen Code- oder Programmsatz mit einem anderen Code- oder Programmsatz zu kombinieren, oder man kann sagen, eine Funktion mit einer anderen Funktion umschließen, um die Funktionalität oder Funktionsweise dieser Funktion zu erweitern. Dekoratoren können auch als Dekoratorfunktionen bezeichnet werden.

Entwickler haben diesen Dekorator-Begriff in anderen Sprachen wie Python und C# verwendet, und jetzt hat auch JavaScript Dekoratoren eingeführt.

Funktionsdekorateur

In JavaScript verhalten sich Funktionen wie Objekte, daher werden sie auch als erstklassige Objekte bezeichnet. Dies geschieht, weil wir einer Variablen eine Funktion zuweisen oder eine Funktion von einer Funktion zurückgeben können oder eine Funktion als Parameter an eine Funktion übergeben können.

Beispiel

const func_variable= function(){
   console.log("Hey there");
}
func_variable()

Beispiel

Übergeben Sie eine Funktion an eine andere Funktion

// MainFunction function takes a function as a parameter
function MainFunction(func) {
   func()
   console.log("Main function")
}

// Assigning function to a variable
var argumentFunction = function() {
   console.log("passed function")
}

//passing argumentFunction function to to MainFunction
MainFunction(argumentFunction)

Beispiel

Eine Funktion durch eine andere Funktion zurückgeben

function SumElement(par1, par2) {
   var addNumbers = function () {
      result = par1+par2;
      console.log("Sum is:", result);
   }
   
   // Returns the addNumbers function
   return addNumbers
}
var PrintElement = SumElement(3, 4)
console.log(PrintElement);
PrintElement()

Funktionen höherer Ordnung

Eine Funktion höherer Ordnung ist eine Funktion, die eine Funktion als Parameter akzeptiert und diese Funktion zurückgibt, nachdem eine Operation ausgeführt wurde. Die oben besprochene Funktion ist eine Funktion höherer Ordnung, nämlich printAdditionFunc.

Beispiel

// higher order function
   function PrintName(name) {
      return function () {
         console.log("My name is ", name);
      }
   }
   
// output1 is a function, PrintName returns a function
var output1 = PrintName("Kalyan")
output1()

var output2= PrintName("Ashish")
output2()

Sie denken vielleicht, dass wir Dekoratoren bereits als Funktionen höherer Ordnung haben. Warum brauchen wir also separate Dekoratoren?

Wir haben also den Function Decorator, eine JavaScript-Funktion höherer Ordnung, aber wenn die Klasse in JavaScript erscheint, haben wir auch Funktionen in der Klasse, bei denen die Funktion höherer Ordnung fehlschlägt, genau wie der Decorator.

Beispiel

Schauen wir uns das Problem der Funktionen höherer Ordnung von Klassen an -

// higher is a decorator function
function higher(arg) {
   return function() {
      console.log("First "+ arg.name)
      arg() // Decorator function call
      console.log("Last " + arg.name)
   }
}
class Website {
   constructor(fname, lname) {
      this.fname = fname
      this.lname = lname
   }
   websiteName() {
      return this.fname + " " + this.lname
   }
}
var ob1 = new Website("Tutorials", "Point")
// Passing the class method websiteName to the higher order function
var PrintName = higher(ob1.websiteName)
PrintName()

Was hier passiert, ist, dass wenn die höhere Funktion aufgerufen wird, sie ihr Argument, das eine Mitgliedsfunktion der Klasse ist, hier als WebsiteName-Funktion aufruft. Da die Funktion websiteName von einer externen Klassenfunktion aufgerufen wird, ist der Wert der Funktion innerhalb der Funktion websiteName undefiniert. Das ist also der Grund für diesen Protokollfehler.

Um dieses Problem zu lösen, werden wir auch ein Klassenobjekt Website übergeben, das letztendlich den Wert davon enthält.

//higher is a decorator function
function higher(ob1, arg) {
   return function() {
      console.log("Execution of " + arg.name + " begin")
      arg.call(ob1) //// Decorator function call
      console.log("Execution of " + arg.name + " end")
   }
}
class Website {
   constructor(fname, lname) {
      this.fname = fname
      this.lname = lname
   }
   websiteName() {
      return this.fname + " " + this.lname
   }
}
var ob1 = new Website("Tutorials", "Point")
//Passing the class method websiteName to the higher order function
var PrintName = higher(ob1, ob1.websiteName)
PrintName()

In der PrintName-Funktion rufen wir arg (eine WebsiteName-Funktion) über die Aufruffunktion auf, die mithilfe des Website-Klassenobjekts die WebsiteName-Funktion aufruft, sodass der Wert dieses Zeigers ein Objekt der Website-Klasse ist und über fname und lname verfügt Variablen, damit es ordnungsgemäß und ohne Fehler funktioniert.

Ich hoffe, Sie verstehen mithilfe dieses Artikels Dekorateure und ihre Verwendungsmöglichkeiten.

Das obige ist der detaillierte Inhalt vonWas sind Dekoratoren und wie werden sie in JavaScript verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!