Разница в функциях Javascript?

ProgramBox

Разница в функциях Javascript?

Post author:admin
Запись опубликована:28 марта, 2023
Post category:Вопросы по программированию

#javascript #reactjs

Вопрос:

В чем разница между этим

 const handleChange = panel => (event, expanded) => {
        
}

…и это

 const handleChange = (panel, event, expanded) => {

}

Второй способ прерывает работу приложения, и я пытался найти какой-нибудь материал о том, чем они отличаются. Код является частью обработчика событий для панели расширения react, причем расширение панели контролируется вышеупомянутым событием.

 <ExpansionPanel
id={`${mfeId} '_' ${course.id}_CoursePanel`}
expanded={expanded === 'panel_' course.id}
onChange={handleChange('panel_' course.id)}
variant={'card'}
className={classes.courseExpansionPanel}
                        >

1. Чего вы пытаетесь здесь добиться?

2. Первая — это функция, которая возвращает функцию, вторая — нет (если только она не делает этого в коде, который вы не опубликовали).

3. Первая также называется функцией более высокого порядка (функция, которая возвращает функцию)

4. Причина, по которой ваш код прерывается со 2-й функцией, заключается в том, что для поддержки onChange необходимо получить функцию, но «handleChange(‘panel_’ course.id )» выполняет handleChange с заданными аргументами прямо там. Ваша функция handleChange, вероятно, завершится неудачей, потому что она вызывается только с 1 аргументом. Событие и расширенные аргументы не определены. Даже если это не приведет к сбою, поддержка onChange получит свой результат, который не является функцией, которая затем завершится неудачей.

5. Чтобы использовать 2-й handleChange, вам нужно было бы передать его следующим образом: onChange={(событие, расширенное) => handleChange(‘panel_’ course.id , событие, расширено)}

Ответ №1:

Несмотря на то, что Javascript является динамически типизированным языком, у него есть типы, и в подобных случаях полезно думать в их терминах. Давайте заменим это на простейшую возможную аналогию:

 const add = a => (b, c) => a   b   c;
const otherAdd = (a, b, c) => a   b   c;

Первая — это функция, которая принимает число и возвращает функцию, которая принимает два числа, а затем эта функция возвращает сумму. Другая — это функция, которая просто принимает 3 числа и возвращает сумму.

Что происходит, когда вы заменяете одно на другое?

 2 - add(2, 3, 4);   // Error! You can't subtract a function from 2 (third argument is silently ignored!)
4   otherAdd(2, 3); // Nonsense result! c will be undefined

Ответ №2:

Первая — это функция с одним аргументом (панель), которая возвращает новую функцию, которая принимает 2 дополнительных аргумента (событие, расширенный)

Вам нужно вызвать обе функции, чтобы выполнить код внутри:

 handleChange(panel)(event, expanded)

Это сокращение от:

 const handleChange = (panel) => {
  return (event, expanded) => {
     ....
  }
}

Вторая — это просто простая функция, которая принимает три аргумента, вы можете использовать ее как:

 handleChange(panel, event, expanded)

Как вы можете видеть, хотя оба варианта выполняют один и тот же код, они вызываются по-разному: ваш код может работать только с одним из двух.

Ответ №3:

Процесс, который вы показали, называется currying — преобразование функции, принимающей несколько аргументов, в функцию, принимающую один аргумент и возвращающую другую функцию, принимающую дополнительные аргументы.

 const handleChange = panel => (event, expanded) => {
        
}

Принимает один аргумент ( panel ) и возвращает функцию с двумя аргументами ( event и expanded ).

 const handleChange = (panel, event, expanded) => {

}

Принимает три аргумента и возвращает значение.