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

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

什么是 JavaScript 装饰器？

装饰器一词意味着将一组代码或程序与另一个代码或程序组合，或者可以将其描述为用另一个函数包装一个函数以扩展函数的功能或工作方式。装饰器也可以称为装饰器函数。

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

函数装饰器

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

示例

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

示例

将函数传递给另一个函数

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

示例

由另一个函数返回函数

Open Compiler
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 就是一个高阶函数。

示例

Open Compiler
// 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 中出现类时，我们也在类中有了函数，而充当装饰器的高阶函数在这里失效了。

示例

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

Open Compiler
// 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 函数内部，this 的值为 undefined。所以，这就是导致此日志错误的原因。

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

Open Compiler
//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 函数，因此 this 指针的值将是 Website 类的对象，并且它同时具有 fname 和 lname 两个变量，因此它将在没有任何错误的情况下工作。

希望通过本文，您已经了解了装饰器及其用途。

更新于：2022-12-01

945 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告