В JavaScript, функции являются “функциями первого класса”, соответственно они могут:
- храниться в переменной, объекте или массиве.
- передаваться как аргументы в другую функцию.
- и даже могут быть возвращены из функции.
Хранение функций
В JavaScript функции могут храниться тремя способами:
- храниться в переменной:
let fn = function doSomething() {} - храниться в объекте :
let obj = { doSomething : function(){} } - храниться в массиве :
arr.push(function doSomething() {})
В первом и третьем примере я использовал так называемое “функциональное выражение” (Function Expression).
“Функциональные выражения” определяют функцию как часть большего выражения. Это когда строка кода начинается не с ключевого слова function.
В случае, если мы напишем строку с ключевого словаfunction,то это будет “определение функции” (Function Declaration) и к функции будет применятся “поднятие функций”(hoisting).
Функции как аргументы
В следующем примере функцияdoSomethingотправляется в виде аргумента в функциюdoAction().
doAction(function doSomething(){});
doSomething — это “функция обратного вызова”.
Функции обратного вызова передаются в качестве “коллбека”(от “callback“) в качестве аргумента в другие функции. Коллбеки часто встречаемая практика в мире Javascript.
Функции высшего порядка
Функции высшего порядка — это функции, которые принимают в качестве аргументов другие функции, либо возвращают функцию. А также могут делать оба действия одновременно.
Давайте взглянем на встроенные методы, которые как раз являются функциями высшего порядка : filter(), map() и reduce().
filter()вызывается на массиве и принимает функцию в качестве первого аргумента, которая определяет условие фильтрации, которое может быть бесконечно гибким.
let numbers = [1,2,3,4,5,6];
function isEven(x){
return x % 2 === 0;
}
let evenNumbers = numbers.filter(isEven);
//2 4 6
map() превращает список значений в иные(модифицированные вами в переданной функции) значения, не изменяя оригинальный массив.
let numbers = [1,2,3,4,5,6];
function double(x){
return x*2;
}
let doubleNumbers = numbers.map(double);
//2 4 6 8 10 12
reduce() аккумулирует все значения коллекции в единое значение. Второй аргумент может быть любым доступным типом в Javascript.
let numbers = [1,2,3,4,5,6];
function sum(total, value){
return total + value;
}
let total = numbers.reduce(sum, 0);
//21
Как вы можете заметить, работать с коллекциями в функциональном стиле гораздо проще.
А теперь давайте сами создадим функцию высшего порядка doWithLoading(). Она будет принимать функцию в качестве параметра и исполнять её. Перед началом исполнения мы выведем сообщение о начале исполнения, а по завершению о том, что функцию выполнена.
function doWithLoading(fn){
console.log("начало загрузки");
let returnValue = fn();
console.log("конец загрузки");
return returnValue;
}
function process() {
console.log("загружаем...");
}
doWithLoading(process);
// начало загрузки
// загружаем...
// конец загрузки
Функции возвращающие функцию
Ниже пример функции, которая возвращает другую функцию:
function createGenerator(){
return function generateNewID(){}
}
Замыкание
Вот пример функции, createGenerator() которая создает другую функциюgenerateNewID() с приватным состоянием. Каждый раз когда мы вызываем createGenerato,мы запоминаем индекс последнего вызова и возвращаем строку с номером текущего вызова.
function createGenerator(prefix){
let index = 0;
return function generateNewID(){
index++;
return prefix + index.toString();
}
}
let generateNewID = createGenerator("вызов номер: ");
console.log(generateNewID()); //вызов номер: 1
console.log(generateNewID()); //вызов номер: 2
console.log(generateNewID()); //вызов номер: 3
Используя замыкания, теперь мы умеем создавать функции с приватным состоянием.
Декораторы
Декораторы — это функции высшего порядка, которые принимают функцию в виде аргумента и возвращают другую функцию. Возвращаемая функция — это модифицированная функция с аргумента. Но, фишка в том, что мы не изменяем код оригинальной функции.
Самый простой декоратор, который может быть найден в популярной библиотеке, например underscore.js или lodash.js — это функцияonce(). Она кэширует результат вызова функции и при повторном вызов возвращает данные с кэша, не вычисляя их повторно. В мире ООП обычно называется Синглтон. Ниже вы можете увидеть имплементацию данного декоратора.
function once(fn){
let returnValue;
let canRun = true;
return function runOnce(){
if(canRun) {
returnValue = fn.apply(this, arguments);
canRun = false;
}
return returnValue;
}
}
var processonce = once(process);
processonce(); //process
processonce(); //
Функции-декораторы мощная штука для создания произвольного поведения уже существующих функций без изменения кода оных.
Свойства функций
Функция — это объект, поэтому она может иметь свои собственные свойства, например name и length или методыtoString(), bind(), apply() и call().
let log = function logMessage(message) { console.log(message); }
console.log(log.name); //logMessage console.log(log.length); //1 console.log(log.toString());
Частичное применение — это предоставление для функции меньшего количества аргументов, чем она ожидает.
Метод bind() является таким примером. Обратите внимание на первый аргумент, который ожидаетthis.
function log(level, message){}
var logInfo = log.bind(null, "Info");
logInfo("message");
Заметили, как мы создали функциюlogInfo() ? Теперь она принимает только один аргумент(message), минуя this.
Лямбда функции
Лямбда функции — это функции, которые используются как значение.
Eric Elliott in Programming JavaScript Applications
Поскольку в JavaScript, функции являются объектами первого класса, их можно использовать как лямбда функции. Лямбда функции могут быть именованные и безымянные. Мне кажется, что вам привычней использовать именованные функции.
Ниже пример renderFirstItem функции использованной как лямбда:
function renderFirstItem(){
/* code */
}
$("#first").click(renderFirstItem);
Заключение
Функции первого класса и Замыкания, концепции которые предоставляют возможность писать в функциональном стиле. В результате мы можем использовать функции высшего порядка для удобной работы с массивами, а также использовать их в виде декораторов.
Также функции первого класса позволяют нам абстрагировать некий функционал и работать с функцией как с примитивом.
В JavaScript функции тоже объекты. А объекты могут иметь методы, например call, apply, bind,которые могут использовать частичное применение функций чтобы установить контекст this.
Лучшая вещь в JavaScript — это имплементация функций. Это дает возможность делать всё правильно.
Douglas Crockford in JavaScript The Good Parts
Перевод статьи Cristi Salcescu: Discover the power of first class functions
