Apakah penghias dan bagaimana ia digunakan dalam JavaScript?

Dalam tutorial ini, anda akan belajar tentang penghias JavaScript dan memahami kerja dan kegunaan dalaman mereka.

Apakah penghias dalam JavaScript?

Perkataan penghias bermaksud menggabungkan satu set kod atau program dengan set kod atau program lain, atau anda boleh katakan membungkus fungsi dengan fungsi lain untuk memanjangkan kefungsian atau fungsi fungsi tersebut. Penghias juga boleh dipanggil fungsi penghias.

Pembangun telah menggunakan istilah penghias ini dalam bahasa lain seperti Python, C#, dan kini JavaScript juga telah memperkenalkan penghias.

Penghias fungsi

Dalam fungsi JavaScript berkelakuan seperti objek jadi ia juga dipanggil objek kelas pertama, ini berlaku kerana kita boleh menetapkan fungsi kepada pembolehubah atau mengembalikan fungsi daripada fungsi atau kita boleh menghantar fungsi sebagai parameter kepada fungsi .

Contoh

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

Contoh

Lepaskan fungsi ke fungsi lain

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

Contoh

Kembalikan fungsi melalui fungsi lain

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

Fungsi pesanan lebih tinggi

Fungsi tertib lebih tinggi ialah fungsi yang mengambil fungsi sebagai parameter dan mengembalikan fungsi tersebut selepas melakukan beberapa operasi. Fungsi yang dibincangkan di atas adalah fungsi tertib tinggi, iaitu printAdditionFunc.

Contoh

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

Anda mungkin berfikir, kami sudah mempunyai penghias sebagai fungsi peringkat tinggi, jadi mengapa kami memerlukan penghias berasingan?

Jadi, kami mempunyai penghias fungsi, iaitu fungsi JavaScript peringkat tinggi, tetapi apabila kelas muncul dalam JavaScript, kami juga mempunyai fungsi dalam kelas, di mana fungsi peringkat tinggi menjadi gagal, sama seperti penghias.

Contoh

Mari kita lihat masalah fungsi peringkat tinggi kelas -

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

Apa yang berlaku di sini ialah apabila fungsi yang lebih tinggi dipanggil, ia memanggil argumennya, yang merupakan fungsi ahli kelas, sebagai fungsi websiteName di sini. Memandangkan fungsi websiteName dipanggil daripada fungsi kelas luaran, nilai fungsi tidak ditentukan dalam fungsi websiteName. Jadi inilah sebab di sebalik ralat log ini.

Jadi, untuk menyelesaikan masalah ini, kami juga akan lulus objek kelas Laman web yang akhirnya akan memegang nilai ini.

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

Dalam fungsi PrintName kami memanggil arg (yang merupakan fungsi WebsiteName) melalui fungsi panggilan yang memanggil fungsi WebsiteName dengan bantuan objek kelas Laman Web jadi nilai penunjuk ini akan menjadi objek kelas Laman Web dan mempunyai nama dan nama Kedua ini pembolehubah, jadi ia akan berfungsi dengan baik tanpa sebarang ralat.

Semoga anda memahami penghias dan kegunaannya dengan bantuan artikel ini.

Atas ialah kandungan terperinci Apakah penghias dan bagaimana ia digunakan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!