Bagaimanakah Kari Berfungsi dengan Berbilang Fungsi Anak Panah dalam JavaScript?

Kari dengan Berbilang Fungsi Anak Panah dalam JavaScript

Anda mungkin menemui kod seperti ini dalam aplikasi React:

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

Sintaks yang membingungkan ini mewakili apa yang dikenali sebagai kari fungsi.

Apa itu Kari?

Kari ialah teknik yang membolehkan sesuatu fungsi ditakrifkan dalam bahagian. Contohnya:

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

Ini bersamaan dengan fungsi tradisional:

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

Memfokuskan pada Nilai Pulangan

Dalam fungsi anak panah, nilai pulangan diwakili sebagai:

const f = someParam => returnValue

Oleh itu, fungsi tambah kami mengembalikan fungsi:

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

Memanggil fungsi:

add(2)(3)  // returns 5

Ini berlaku kerana panggilan fungsi luar mengembalikan fungsi dalam.

Memahami pemegangTukar Kod

Memohon ini pada pemegangTukar kod:

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

Oleh kerana fungsi anak panah mengekalkan konteks, ia kelihatan seperti:

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

Kod ini mencipta fungsi untuk medan tertentu. Dalam React, ia digunakan untuk menyediakan pendengar untuk pelbagai medan input tanpa menduplikasi kod.

Fungsi Anak Panah Berbilang

Fungsi anak panah berbilang boleh disusun, membenarkan fungsi yang mengejutkan seperti ini:

const $ = x => k =>
  $ (k(x))

Fungsi kari ini, dipanggil $ (sebagai pun pada sintaks Lisp), nampaknya menerima bilangan hujah yang sewenang-wenangnya, mengabstrakkan konsep arity.

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