Bagaimanakah Fungsi Berbilang Anak Panah Bersarang Berfungsi dalam JavaScript?

Memahami Berbilang Fungsi Anak Panah dalam JavaScript

Dalam JavaScript, anda mungkin menghadapi kod seperti ini:

  e.preventDefault();
  /// Do something here
}

Fungsi Kari

Kod ini menunjukkan karipap fungsi. Fungsi kari ialah fungsi yang mengembalikan fungsi, membolehkan anda menggunakan sebahagian argumen.

Pertimbangkan contoh berikut (tanpa fungsi anak panah):

const add = (x, y) => x + y
add(2, 3) //=> 5

Dalam bentuk kari:

const add = x => y => x + y

Tanpa fungsi anak panah:

const add = function (x) {
  return function (y) {
    return x + y
  }
}

Fokus pada Nilai Pulangan

Fungsi anak panah berkelakuan seperti berikut (memperhatikan nilai pulangan):

const f = someParam => returnValue

Jadi, dalam fungsi tambah kami, nombor mengembalikan fungsi:

const add = x => (y => x + y)

Ini bermakna tambah nombor pulangan a fungsi:

add(2) // returns (y => 2 + y)

Memanggil Fungsi Kari

Untuk menggunakan fungsi kari, panggilnya secara berbeza:

add(2)(3)  // returns 5

Ini kerana yang pertama panggilan fungsi mengembalikan fungsi kedua. Hanya panggilan fungsi kedua memberikan hasil sebenar.

Aplikasi kepada Kod Anda

Dalam kod anda:

handleChange = field => e => {
  e.preventDefault()
  /// Do something here
}

Tanpa fungsi anak panah:

handleChange = function(field) {
  return function(e) {
    e.preventDefault()
    // Do something here
    // return ...
  };
};

Memandangkan fungsi anak panah mengikat ini secara leksikal, ia kelihatan lebih seperti ini:

handleChange = function(field) {
  return function(e) {
    e.preventDefault()
    // Do something here
    // return ...
  }.bind(this)
}.bind(this)

Ini bermakna handleChange mencipta fungsi untuk medan tertentu. Ini adalah teknik React untuk menyediakan pendengar acara untuk setiap input tanpa pendua.

Lebih Banyak Anak Panah

Lebih daripada dua fungsi anak panah boleh disusun:

const three = a => b => c =>
  a + b + c

const four = a => b => c => d =>
  a + b + c + d

three (1) (2) (3) // 6

four (1) (2) (3) (4) // 10

Karipap dan Arity

Karipap boleh mengejutkan anda. Di sini, $ ditakrifkan sebagai fungsi kari dengan dua parameter, tetapi anda boleh memberikan sebarang bilangan argumen:

const $ = x => k =>
  $ (k (x))
  
const add = x => y =>
  x + y

const mult = x => y =>
  x * y
  
$ (1)           // 1
  (add (2))     // + 2 = 3
  (mult (6))    // * 6 = 18
  (console.log) // 18
  
$ (7)            // 7
  (add (1))      // + 1 = 8
  (mult (8))     // * 8 = 64
  (mult (2))     // * 2 = 128
  (mult (2))     // * 2 = 256
  (console.log)  // 256

Atas ialah kandungan terperinci Bagaimanakah Fungsi Berbilang Anak Panah Bersarang Berfungsi dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!