Fungsi

Pengenalan kepada Fns:

Blok binaan asas bahasa.
Konsep yang paling penting.
Fn - sekeping kod yang boleh digunakan berulang kali.
{Invoking, Running, Calling} a Fn semuanya bermakna sama.
Fn - boleh mengambil data sebagai hujah, mengembalikan data sebagai hasil selepas pengiraan.
Panggilan Fn digantikan dengan hasil yang dikembalikan daripadanya selepas pelaksanaan.
Fns sesuai untuk melaksanakan prinsip KERING
Hujah diluluskan, parameter ialah pemegang tempat yang menerima nilai yang dihantar ke fn.

Perisytiharan Fn vs ungkapan:

Pengisytiharan Fn bermula dengan kata kunci fn.
Ungkapan Fn ialah fn tanpa nama, disimpan di dalam pembolehubah. Kemudian pembolehubah yang menyimpan fn bertindak sebagai fn.
Fn defn tanpa nama ialah ungkapan, dan ungkapan itu menghasilkan nilai. Fn hanyalah nilai.
Fn bukan jenis Rentetan, Nombor. Nilainya, oleh itu boleh disimpan dalam pembolehubah.
Pengisytiharan Fn boleh dipanggil walaupun sebelum ia ditakrifkan dalam kod iaitu ia dinaikkan. Ini tidak berfungsi dengan ungkapan Fn.
Ungkapan Fn memaksa pengguna untuk mentakrifkan fns dahulu, kemudian menggunakannya kemudian. Semuanya disimpan di dalam pembolehubah.
Kedua-duanya mempunyai tempat di JS, oleh itu perlu dikuasai dengan betul.
Ungkapan Fn = pada asasnya nilai fn yang disimpan dalam pembolehubah

Anak panah Fn disertakan dengan ES6

Pemulangan tersirat untuk satu pelapik, untuk berbilang baris pemulangan eksplisit diperlukan.
Anak panah fns tidak mendapat kata kunci 'ini' sendiri
Pembelajaran bukan proses linear, pengetahuan dibina secara berperingkat secara beransur-ansur. Anda tidak boleh mempelajari segala-galanya tentang sesuatu perkara sekaligus.

## Default parameters
const bookings = [];

const createBooking = function(flightNum, numPassengers=1, price= 100 * numPassengers){
  // It will work for parameters defined before in the list like numPassengers is defined before its used in expression of next argument else it won't work.
  // Arguments cannot be skipped also with this method. If you want to skip an argument, then manually pass undefined value for it which is equivalent to skipping an argument
  /* Setting default values pre-ES6 days.
  numPassengers = numPassengers || 1;
  price = price || 199;*/

// Using enhanced object literal, where if same property name & value is there, just write them once as shown below.
  const booking = {
    flightNum,
    numPassengers,
    price,
  };

  console.log(booking);
  bookings.push(booking);
}

createBooking('AI123');
/*
{
  flightNum: 'AI123',
  numPassengers: 1,
  price: 100
}
*/ 

createBooking('IN523',7);
/*
{
  flightNum: 'IN523',
  numPassengers: 7,
  price: 700
}
*/ 

createBooking('SJ523',5);
/*
{
  flightNum: 'SJ523',
  numPassengers: 5,
  price: 500
} 
*/ 

createBooking('AA523',undefined, 100000);
/*
{
  flightNum: 'AA523',
  numPassengers: 1,
  price: 100000
}
*/ 

Memanggil satu fn dari dalam fn lain:

Teknik yang sangat biasa untuk menyokong prinsip KERING.
Menyokong kebolehselenggaraan
kembali serta-merta keluar dari fn
return = untuk mengeluarkan nilai daripada fn, tamatkan pelaksanaan
Tiga cara menulis fn, tetapi semuanya berfungsi dengan cara yang sama iaitu Input, Pengiraan, Output
Parameter = ruang letak untuk menerima nilai i/p, Seperti pembolehubah tempatan fn.

Cara hujah lulus berfungsi iaitu Nilai vs Jenis Rujukan

Primitif dihantar mengikut nilai kepada fn. Nilai asal kekal utuh.
Objek diluluskan dengan merujuk kepada fn. Nilai asal ditukar.
JS tidak mempunyai nilai lulus melalui rujukan.

Interaksi fns berbeza dengan objek yang sama boleh menimbulkan masalah kadangkala

Fns adalah kelas pertama dalam JS, oleh itu kita boleh menulis HO fns.

Fns dianggap sebagai nilai, hanya satu lagi 'jenis' objek.
Oleh kerana objek adalah nilai, fns adalah nilai juga. Oleh itu, boleh juga disimpan dalam pembolehubah, dilampirkan sebagai sifat objek dll.
Juga, fns boleh dihantar ke fns lain juga. Cth. pengendali pendengar acara.
Kembali dari fns.
Fns ialah objek, dan objek mempunyai kaedah-sifat mereka sendiri dalam JS. Oleh itu, fn boleh mempunyai kaedah serta sifat yang boleh dipanggil pada mereka. Ex call, apply, bind dsb.

Fn Aras Tinggi : Fn yang menerima fn lain sebagai hujah, yang mengembalikan fn baharu atau kedua-duanya. Hanya mungkin kerana fns adalah kelas pertama dalam JS
Fn yang dihantar dalam panggilan balik fn, yang akan dipanggil oleh HOF.

Fns yang mengembalikan fn lain, iaitu dalam Penutupan.

Fns kelas pertama dan HOF ialah konsep yang berbeza.

Panggil Balik Fns Adv:
Benarkan kami membuat abstraksi. Memudahkan untuk melihat masalah yang lebih besar.
Modularkan kod kepada lebih banyak ketulan yang lebih kecil untuk digunakan semula.

// Example for CB & HOF:
// CB1
const oneWord = function(str){
  return str.replace(/ /g,'').toLowerCase();
};

// CB2
const upperFirstWord = function(str){
    const [first, ...others] = str.split(' ');
    return [first.toUpperCase(), ...others].join(' ');
};

// HOF
const transformer = function(str, fn){
  console.log(`Original string: ${str}`);
  console.log(`Transformed string: ${fn(str)}`);
  console.log(`Transformed by: ${fn.name}`);
};
transformer('JS is best', upperFirstWord);
transformer('JS is best', oneWord);

// JS uses callbacks all the time.
const hi5 = function(){
  console.log("Hi");
};
document.body.addEventListener('click', hi5);

// forEach will be exectued for each value in the array.
['Alpha','Beta','Gamma','Delta','Eeta'].forEach(hi5);

Fns mengembalikan fn lain.

// A fn returning another fn.
const greet = function(greeting){
  return function(name){
    console.log(`${greeting} ${name}`);
  }
}

const userGreet = greet('Hey');
userGreet("Alice");
userGreet("Lola");

// Another way to call
greet('Hello')("Lynda");

// Closures are widely used in Fnal programming paradigm.

// Same work using Arrow Fns. Below is one arrow fn returning another arrow fn.
const greetArr = greeting => name => console.log(`${greeting} ${name}`);

greetArr('Hola')('Roger');

"Anda hanya akan maju apabila anda memahami topik tertentu dengan teliti"

call(), apply(), bind():

Digunakan untuk menetapkan kata kunci 'ini' dengan menetapkan nilainya secara eksplisit.
panggilan - mengambil senarai hujah selepas nilai kata kunci 'ini'.
apply - mengambil tatasusunan hujah selepas nilai kata kunci 'ini'. Ia akan mengambil elemen daripada tatasusunan itu dan menghantarnya ke dalam fungsi.

bind(): Kaedah ini mencipta fungsi baharu dengan kata kunci ini terikat pada objek yang ditentukan. Fungsi baharu mengekalkan konteks ini yang ditetapkan oleh .bind() tidak kira bagaimana fungsi itu digunakan.

panggilan() dan gunakan(): Kaedah ini memanggil fungsi dengan nilai dan hujah ini yang ditentukan. Perbezaan di antara mereka ialah .call() mengambil argumen sebagai senarai, manakala .apply() mengambil argumen sebagai tatasusunan.

const lufthansa = {
  airline: 'Lufthansa',
  iataCode: 'LH',
  bookings: [],
  book(flightNum, name){
    console.log(`${name} booked a seat on ${this.airline} flight ${this.iataCode} ${flightNum}`);
    this.bookings.push({flight: `${this.iataCode} ${flightNum}`, name});
  },
};

lufthansa.book(4324,'James Bond');
lufthansa.book(5342,'Julie Bond');
lufthansa;


const eurowings = {
  airline: 'Eurowings',
  iataCode: 'EW',
  bookings: [],
};

// Now for the second flight eurowings, we want to use book method, but we shouldn't repeat the code written inside lufthansa object.

// "this" depends on how fn is actually called.
// In a regular fn call, this keyword points to undefined.
// book stores the copy of book method defuned inside the lufthansa object.
const book = lufthansa.book;

// Doesn't work
// book(23, 'Sara Williams');

// first argument is whatever we want 'this' object to point to.
// We invoked the .call() which inturn invoked the book method with 'this' set to eurowings 
// after the first argument, all following arguments are for fn.
book.call(eurowings, 23, 'Sara Williams');
eurowings;

book.call(lufthansa, 735, 'Peter Parker');
lufthansa;

const swiss = {
  airline: 'Swiss Airlines',
  iataCode: 'LX',
  bookings: []
}

// call()
book.call(swiss, 252, 'Joney James');

// apply()
const flightData = [652, 'Mona Lisa'];
book.apply(swiss, flightData);

// Below call() syntax is equivalent to above .apply() syntax. It spreads out the arguments from the array.
book.call(swiss, ...flightData);

Atas ialah kandungan terperinci Fungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!