在本教程中，您将了解 JavaScript 装饰器并了解它们的内部工作原理和用途。
JavaScript 中的装饰器是什么？
装饰器这个词意味着将一组代码或程序与另一组代码或程序组合起来，或者可以说是用另一个函数包装一个函数以扩展该函数的功能或工作。装饰器也可以称为装饰器函数。
开发人员一直在 Python、C# 等其他语言中使用这个装饰器术语，现在 JavaScript 也引入了装饰器。
函数装饰器
在 JavaScript 中，函数的行为类似于对象，因此它们也被称为一等对象，发生这种情况是因为我们可以将函数分配给变量或从函数返回函数，或者可以将函数作为参数传递给函数.
立即学习“Java免费学习笔记（深入）”；
示例
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。
采用HttpClient向服务器端action请求数据，当然调用服务器端方法获取数据并不止这一种。WebService也可以为我们提供所需数据，那么什么是webService呢？，它是一种基于SAOP协议的远程调用标准，通过webservice可以将不同操作系统平台，不同语言，不同技术整合到一起。 实现Android与服务器端数据交互，我们在PC机器java客户端中，需要一些库，比如XFire,Axis2,CXF等等来支持访问WebService，但是这些库并不适合我们资源有限的android手机客户端，
示例
// 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 这两个变量，因此它将正常工作而不会出现任何错误。
希望您通过本文的帮助了解装饰器及其用途。
