什麼是裝飾器以及它們在 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 這兩個變量，因此它將正常工作而不會出現任何錯誤。

希望您透過本文的幫助了解裝飾器及其用途。

以上是什麼是裝飾器以及它們在 JavaScript 中如何使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！