什么是装饰器以及它们在 JavaScript 中如何使用？

在本教程中，您将了解 JavaScript 装饰器并了解它们的内部工作原理和用途。

JavaScript 中的装饰器是什么？

装饰器这个词意味着将一组代码或程序与另一组代码或程序组合起来，或者可以说是用另一个函数包装一个函数以扩展该函数的功能或工作。装饰器也可以称为装饰器函数。

开发人员一直在 Python、C# 等其他语言中使用这个装饰器术语，现在 JavaScript 也引入了装饰器。

函数装饰器

在 JavaScript 中，函数的行为类似于对象，因此它们也被称为一等对象，发生这种情况是因为我们可以将函数分配给变量或从函数返回函数，或者可以将函数作为参数传递给函数.

示例

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

示例

将函数传递给另一个函数

// 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)

示例

通过另一个函数返回一个函数

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()

高阶函数

高阶函数是指以函数作为参数并在执行某些操作后返回该函数的函数。上面讨论的函数是一个高阶函数，即printAdditionFunc。

示例

// 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()

你可能会想，我们已经有了装饰器作为高阶函数，那么为什么我们还需要单独的装饰器呢？

所以，我们有函数装饰器，它是一个高阶 JavaScript 函数，但是当类出现在 JavaScript 中时，我们在类中也有函数，其中高阶函数变得失败，就像装饰器一样。

示例

让我们看看类的高阶函数的问题 -

// 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()

这里发生的情况是，当调用更高的函数时，它会调用其参数，该参数是类的成员函数，作为此处的 websiteName 函数。由于函数 websiteName 是从外部类函数调用的，因此该函数的值在 websiteName 函数内部未定义。因此，这就是此日志错误背后的原因。

因此，为了解决这个问题，我们还将传递 Website 类的对象，该对象最终将保留 this 的值。

//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()

在 PrintName 函数中，我们通过 call 函数调用 arg （这是一个 websiteName 函数），该函数通过 Website 类对象的帮助调用 websiteName 函数，因此该指针的值将是 Website 类的对象，并且是具有 fname 和 lname 这两个变量，因此它将正常工作而不会出现任何错误。

希望您通过本文的帮助了解装饰器及其用途。