Функции

В этой статье описаны функции Javascript на уровне языка: создание, параметры, приемы работы, замыкания и многое другое.

Создание функций

Существует 3 способа создать функцию. Основное отличие в результате их работы - в том, что именованная функция видна везде, а анонимная - только после объявления:

/* функция sum 
определена ниже 
*/
var a = sum(2,2)

function sum(x,y) {
	return x+y
}

/* будет ошибка, 
т.к sum еще не существует
*/
var a = sum(2,2)

var sum = function(x,y) {
	return x+y
}

Функции - объекты

В javascript функции являются полноценными объектами встроенного класса Function. Именно поэтому их можно присваивать переменным, передавать и, конечно, у них есть свойства:

function f() {
	...
}
f.test = 6
...
alert(f.test) // 6

Свойства функции доступны и внутри функции, так что их можно использовать как статические переменные.

Например,

function func() {
	var funcObj = arguments.callee

	funcObj.test++
	alert(funcObj.test)
}
func.test = 1
func()
func()

В начале работы каждая функция создает внутри себя переменную arguments и присваивает arguments.callee ссылку на себя. Так что arguments.callee.test - свойство func.test, т.е статическая переменная test.

В примере нельзя было сделать присвоение:

var test = arguments.callee.test
test++

так как при этом операция ++ сработала бы на локальной переменной test, а не на свойстве test объекта функции.

Объект arguments также содержит все аргументы и может быть преобразован в массив (хотя им не является), об этом - ниже, в разделе про параметры.

Области видимости

Каждая функция, точнее даже каждый запуск функции задает свою индивидуальную область видимости.

Переменные можно объявлять в любом месте. Ключевое слово var задает переменную в текущей области видимости. Если его забыть, то переменная попадет в глобальный объект window. Возможны неожиданные пересечения с другими переменными окна, конфликты и глюки.

В отличие от ряда языков, блоки не задают отдельную область видимости. Без разницы - определена переменная внутри блока или вне его. Так что эти два фрагмента совершенно эквивалентны:

Заданная через var переменная видна везде в области видимости, даже до оператора var. Для примера сделаем функцию, которая будет менять переменную, var для которой находится ниже.

Например:

function a() {
	z = 5 // поменяет z локально.. 

	// .. т.к z объявлена через var
	var z
}

// тест
delete z // очистим на всякий случай глобальную z
a()

alert(window.z)  // => undefined, т.к z была изменена локально

Параметры функции

Функции можно запускать с любым числом параметров.

Если функции передано меньше параметров, чем есть в определении, то отсутствующие считаются undefined.

Следующая функция возвращает время time, необходимое на преодоление дистанции distance с равномерной скоростью speed.

При первом запуске функция работает с аргументами distance=10, speed=undefined. Обычно такая ситуация, если она поддерживается функцией, предусматривает значение по умолчанию:

// если speed - ложное значение(undefined, 0, false...) - подставить 10
speed = speed || 10

Оператор || в яваскрипт возвращает не true/false, а само значение (первое, которое приводится к true).

Поэтому его используют для задания значений по умолчанию. В нашем вызове speed будет вычислено как undefined || 10 = 10.

Поэтому результат будет 10/10 = 1.

Второй запуск - стандартный.

Третий запуск задает несколько дополнительных аргументов. В функции не предусмотрена работа с дополнительными аргументами, поэтому они просто игнорируются.

Ну и в последнем случае аргументов вообще нет, поэтому distance = undefined, и имеем результат деления undefined/10 = NaN (Not-A-Number, произошла ошибка).

Работа с неопределенным числом параметров

Непосредственно перед входом в тело функции, автоматически создается объект arguments, который содержит

1. Аргументы вызова, начиная от нуля
2. Длину в свойстве length
3. Ссылку на саму функцию в свойстве callee

Например,

function func() {
    for(var i=0;i<arguments.length;i++) {
        alert("arguments["+i+"] = "+arguments[i])
    }
}
func('a','b',true)

// выведет
// arguments[0] = a
// arguments[1] = b
// arguments[2] = true

Свойство arguments похоже на массив, т.к у него есть длина и числовые индексы. На самом деле arguments не принадлежит классу Array и не содержит его методов, таких как push, pop и других.

Если все же хочется воспользоваться этими методами, например, чтобы вызвать другую функцию с теми же аргументами, но кроме первого, можно создать из arguments настоящий массив:

var args = Array.prototype.slice.call(arguments)
// .. теперь args - настоящий массив аргументов ..
args.shift()
...

Вызвать функцию для массива аргументов можно при помощи apply:

var func = function(a,b) { alert(a+b) }
var arr = [1,2]
func.apply(null, arr)  // => alert(3)

Пример передачи функции по ссылке

Функцию легко можно передавать в качестве аргумента другой функции.

Например, map берет функцию func, применяет ее к каждому элементу массива arr и возвращает получившийся массив:

var map = function(func, arr) {
    var result = [ ]
    for(var i=0; i<arr.length; i++) {
        result[i] = func(arr[i])
    }
    return result
}

Пример использования:

map(run, [10, 20, 30])  // = [1,2,3]

Или можно создать анонимную функцию непосредственно в вызове map:

// анонимная функция утраивает числа
map( function (a) { return a*3 } ,  [1,2,3])  // = [3,6,9]

Сворачивание параметров в объект

Бывают функции, аргументы которых сильно варьируются.

Например:

// можно указать только часть аргументов
// не указанные - вычисляются или берутся по умолчанию
function resize(toWidth, toHeight,  saveProportions, animate)  {
	// значения по умолчанию
	saveProportions = saveProportions || true
	animate = animate || true
	toHeight = toHeight || ...
}

Вызов с необязательными параметрами приходится делать так:

resize(100, null, null, true)

Чтобы избежать лишних null и сделать код более понятным, используют нечто вроде "keyword arguments", существующих в Python и Ruby. Для этого много параметров пакуют в единый объект:

function resize(setup)  {
	// значения по умолчанию
	var saveProportions = setup.saveProportions || true
	var animate = setup.animate || true
	var toHeight = setup.toHeight || ...
}

Вызов теперь делается гораздо проще:

var setup = {toWidth: 100, animate: true}

resize(setup)
// или
resize({toWidth: 100, animate: true})

Так - куда понятнее. А если параметров больше 5, то вообще - единственный нормальный способ.

Кроме того, с объектом можно удобнее делать последовательности вызовов вроде:

var setup = {toWidth: 100, animate: true, saveProportions: false}

resize(setup)

setup.toWidth = 200
resize(setup)