Đó là một chức năng curried
Đầu tiên, kiểm tra chức năng này với hai tham số
const add = (x, y) => x + y
add(2, 3) //=> 5
Đây là một lần nữa ở dạng curried
const add = x => y => x + y
Đây là cùng 1 mã không có chức năng mũi tên
const add = function (x) {
return function (y) {
return x + y
}
}
Tập trung vào return
Nó có thể giúp hình dung nó theo một cách khác. Chúng tôi biết rằng các hàm mũi tên hoạt động như thế này - chúng ta hãy chú ý đặc biệt đến giá trị trả về .
const f = someParam => returnValue
Vì vậy, addhàm của chúng ta trả về một hàm - chúng ta có thể sử dụng dấu ngoặc đơn để thêm rõ ràng. Các in đậm văn bản là giá trị trả về của hàm của chúng tôiadd
const add = x => (y => x + y)
Nói cách khác, addmột số số trả về một hàm
add(2) // returns (y => 2 + y)
Gọi chức năng curried
Vì vậy, để sử dụng chức năng curried của chúng tôi, chúng tôi phải gọi nó là một chút khác nhau
add(2)(3) // returns 5
Điều này là do lệnh gọi hàm đầu tiên (bên ngoài) trả về hàm thứ hai (bên trong). Chỉ sau khi chúng ta gọi hàm thứ hai, chúng ta mới thực sự nhận được kết quả. Điều này càng rõ ràng hơn nếu chúng ta tách các cuộc gọi trên hai đường dây
const add2 = add(2) // returns function(y) { return 2 + y }
add2(3) // returns 5
Áp dụng hiểu biết mới của chúng tôi vào mã của bạn
liên quan: Có gì khác biệt giữa ràng buộc, ứng dụng một phần và cà ri?
OK, bây giờ chúng tôi hiểu cách thức hoạt động, hãy xem mã của bạn
handleChange = field => e => {
e.preventDefault()
/// Do something here
}
Chúng ta sẽ bắt đầu bằng cách biểu diễn nó mà không sử dụng các hàm mũi tên
handleChange = function(field) {
return function(e) {
e.preventDefault()
// Do something here
// return ...
};
};
Tuy nhiên, vì các chức năng mũi tên liên kết từ vựng this, nó thực sự sẽ trông giống như thế này
handleChange = function(field) {
return function(e) {
e.preventDefault()
// Do something here
// return ...
}.bind(this)
}.bind(this)
Có lẽ bây giờ chúng ta có thể thấy những gì nó đang làm rõ ràng hơn. Các handleChangechức năng được tạo ra một chức năng cho một quy định field. Đây là một kỹ thuật React tiện dụng vì bạn bắt buộc phải thiết lập trình nghe của riêng mình trên mỗi đầu vào để cập nhật trạng thái ứng dụng của bạn. Bằng cách sử dụng handleChangechức năng, chúng tôi có thể loại bỏ tất cả các mã trùng lặp sẽ dẫn đến việc thiết lập trình changenghe cho từng trường. Mát mẻ!
1 Ở đây tôi không phải liên kết từ vựng thisvì addhàm ban đầu không sử dụng bất kỳ ngữ cảnh nào, vì vậy việc bảo tồn nó trong trường hợp này không quan trọng.
Mũi tên nhiều hơn
Có thể sắp xếp nhiều hơn hai hàm mũi tên, nếu cần -
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
Chức năng curried có khả năng những điều đáng ngạc nhiên. Dưới đây chúng ta thấy $được định nghĩa là một hàm được xử lý với hai tham số, nhưng tại trang web cuộc gọi, nó xuất hiện như thể chúng ta có thể cung cấp bất kỳ số lượng đối số nào. Curry là sự trừu tượng của arity -
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
Ứng dụng một phần
Ứng dụng một phần là một khái niệm liên quan. Nó cho phép chúng ta áp dụng một phần các chức năng, tương tự như currying, ngoại trừ chức năng không phải được xác định ở dạng curried -
const partial = (f, ...a) => (...b) =>
f (...a, ...b)
const add3 = (x, y, z) =>
x + y + z
partial (add3) (1, 2, 3) // 6
partial (add3, 1) (2, 3) // 6
partial (add3, 1, 2) (3) // 6
partial (add3, 1, 2, 3) () // 6
partial (add3, 1, 1, 1, 1) (1, 1, 1, 1, 1) // 3
Đây là bản demo hoạt động partialmà bạn có thể chơi trong trình duyệt của riêng mình -
const partial = (f, ...a) => (...b) =>
f (...a, ...b)
const preventDefault = (f, event) =>
( event .preventDefault ()
, f (event)
)
const logKeypress = event =>
console .log (event.which)
document
.querySelector ('input[name=foo]')
.addEventListener ('keydown', partial (preventDefault, logKeypress))
<input name="foo" placeholder="type here to see ascii codes" size="50">
