Выбор способа объявления функции JavaScript может сбить с толку новичков, и существует несколько различных вариантов синтаксиса. Каждый из них имеет преимущества, недостатки и подходящее использование, которое может вас застать врасплох.
1. Обычные функции JavaScript
Первый и самый очевидный способ объявить функцию в JavaScript — использовать functionобъявление. Функция с именем multiply (), которая принимает два параметра xи y, умножает их и возвращает значение, может быть реализована с помощью следующего синтаксиса:
function multiply (x, y) {
return x * y;
}
console.log (multiply (2, 2));
// output: 4
Функции, определенные таким образом (объявление функции), поднимаются на вершину текущей области. Можно console.log () поставить перед функцией, и она все равно будет работать.
2. Выражения функций JavaScript
Эту же функцию можно записать в виде выражения, явно задающего переменную:
const multiply = function (x, y) {
return x * y;
}
console.log (multiply (2, 2));
// output: 4
Функция не поднимается, поэтому ее можно использовать только после ее определения.
3. Определения литеральных методов объекта
Функции обрабатываются так же, как и любой другой тип значения в JavaScript, поэтому вы можете определить один из них в другом объекте. Например:
const mathLib = {
// property
PI: 3.14,
// multiply (x, y) method
multiply: function (x, y) {
return x * y;
},
// divide (x, y) method
divide: function (x, y) {
return x / y;
}
}
console.log (mathLib.multiply (2, 2));
// output: 4
Опять же, этот объектный метод может быть вызван только после того, как он был определен.
4. Стрелочные функции ES2015
Стрелочные функции не требуют functionключевого слова, но могут быть назначены только переменной или использоваться анонимно (например, в обратном вызове или обработчике событий). За параметрами, заключенными в круглые скобки ( ()), следует стрелка (=>), обозначающая функцию в следующем блоке кода:
const multiply = (x, y) => { return x * y; };
console.log (multiply (2, 2));
// output: 4
Так как у нас есть только один оператор, returnон является неявным, а скобки можно опустить для одинаковой функциональности с более коротким синтаксисом:
const multiply = (x, y) => x * y;
В случаях, когда функция имеет один параметр, эти скобки также можно убрать:
const square = x => x ** 2;
Хотя скобки
const estimatePI = () => 22 / 7;
Стрелочные функции автоматически присваиваются thisзначению в непосредственной внешней области, поэтому нет необходимости использовать.bind (this).
5. Функции расширения jQuery
jQuery — это библиотека JavaScript, поэтому создание функций во многом аналогично. Однако функциональность jQuery можно расширить, добавив свои собственные методы. Этот jQuery.fn.extend () метод расширяет объект прототипа jQuery ($.fn), поэтому новые функции могут быть связаны с основной jQuery () функцией.
Например, следующий код определяет новые методы checkи uncheckметоды jQuery для изменения полей ввода флажков:
jQuery.fn.extend ({
// check checkboxes
check: function () {
return this.each (function () {
this.checked = true;
}) ;
},
// uncheck checkboxes
uncheck: function () {
return this.each (function () {
this.checked = false;
}) ;
}
}) ;
// check all checkboxes on the page
$ («input[type='checkbox’]»).check () ;
Сохранение функциональности
Синтаксис функций часто зависит от личных предпочтений, но постарайтесь, чтобы ваш код оставался читабельным. Возможно, лучше использовать functionутверждение, чем через несколько недель запутаться в умной, но нечитаемой мешанине из стрелок и скобок.
