1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
---
title: Функциональное выражение
slug: Web/JavaScript/Reference/Operators/function
tags:
- JavaScript
- Оператор
- Функция
translation_of: Web/JavaScript/Reference/Operators/function
---
<div>{{jsSidebar("Operators")}}</div>
<p>Ключевое слово <strong><code>function</code></strong> может использоваться для определения функции внутри выражения.</p>
<p>Вы можете также определять функции используя конструктор {{jsxref("Function")}} и {{jsxref("Statements/function", "объявление функции")}}.</p>
<h2 id="Syntax" name="Syntax">Синтаксис</h2>
<pre class="syntaxbox">var myFunction = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
<em>statements</em>
};</pre>
<p>С версии ES2015 можно также использовать <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочные функции</a>.</p>
<h3 id="Parameters" name="Parameters"><a id="Параметры" name="Параметры">Параметры</a></h3>
<dl>
<dt><code>name</code></dt>
<dd>Имя функции. Может быть опущено, в таком случае функция является <em>анонимной</em>. Имя функции является локальным для её тела.</dd>
<dt><code>paramN</code></dt>
<dd>Имя аргумента, передаваемого в функцию.</dd>
<dt><code>statements</code></dt>
<dd>Инструкции, составляющие тело функции.</dd>
</dl>
<h2 id="Description" name="Description">Описание</h2>
<p>Функциональное выражение и <a href="/ru/docs/Web/JavaScript/Reference/Statements/function">объявление функции</a> очень похожи и имеют почти одинаковый синтаксис. Главным отличием между ними является <em>имя функции,</em> которое в случае функциональных выражений может быть опущено для создания <em>анонимных</em> функций. Функциональное выражение может быть использовано для создания самовызывающейся функции {{Glossary("IIFE")}} (Immediately Invoked Function Expression), которая исполняется сразу же после того, как она была определена. Более подробная информация изложена в разделе о <a href="/ru/docs/Web/JavaScript/Reference/Functions">функциях</a>.</p>
<h3 id="Поднятие_функциональных_выражений_2"><a id="Поднятие_функциональных_выражений" name="Поднятие_функциональных_выражений">Поднятие функциональных выражений</a></h3>
<p>Функциональные выражения в JavaScript не {{Glossary("поднятие", "поднимаются (hoisting)")}}, в отличие от {{jsxref("Statements/function", "объявленных функций", "#Поднимание_объявленной_функции")}}. Вы не можете использовать функциональные выражения прежде, чем вы их определили.</p>
<pre class="brush: js">console.log(notHoisted) // undefined
//Хотя объявленная переменная и поднимается, определение переменной происходит позже
notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function() {
console.log('bar');
};</pre>
<h3 id="Именованное_функциональное_выражение"><a id="№Именованное функциональное выражение" name="№Именованное функциональное выражение">Именованное функциональное выражение</a></h3>
<p>Если вы хотите сослаться на текущую функцию внутри тела этой функции, вам необходимо создать именованное функциональное выражение. Данное имя будет локальным только для тела функции (её области видимости). Кроме того, это позволяет избежать использования нестандартного свойства {{jsxref("arguments.callee")}}.</p>
<pre class="brush: js">var math = {
'factit': function factorial(n) {
console.log(n);
if (n <= 1) {
return 1;
}
return n * factorial(n - 1);
}
};
math.factit(3) //3;2;1;
</pre>
<p>Переменная, которой присвоено функциональное выражение, будет иметь свойство <code>name</code>, содержащее имя функции. Оно не изменится при переприсваивании другой переменной. Для анонимной функции, значением свойства <code>name</code> будет имя переменной (неявное имя). Если же имя задано, то будет использовано имя функции (явное имя). Это же касается стрелочных функций (в их случае там будет записано имя переменной, т.к. они всегда анонимные).</p>
<pre class="brush: js">var foo = function() {}
foo.name // "foo"
var foo2 = foo
foo2.name // "foo"
var bar = function baz() {}
bar.name // "baz"
console.log(foo === foo2); // true
console.log(typeof baz); // undefined
console.log(bar === baz); // false (errors because baz == undefined)</pre>
<h2 id="Examples" name="Examples">Примеры</h2>
<p>Следующий пример демонстрирует создание безымянной (анонимной) функции и присвоение её переменной <code>x</code>. Функция возвращает квадрат переданного значения:</p>
<pre class="brush: js">var x = function (y) {
return y * y;
};
</pre>
<p>Преимущественно анонимные функции используются как {{Glossary("функция обратного вызова", "функции обратного вызова", 1)}}.</p>
<pre class="brush: js">button.addEventListener('click', function(event) {
console.log('button is clicked!')
});</pre>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
<td>{{Spec2('ES6')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
<td>{{Spec2('ES3')}}</td>
<td>Изначальное определение. Реализовано в JavaScript 1.5.</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("javascript.operators.function")}}</p>
<h2 id="See_also" name="See_also">Смотрите также</h2>
<ul>
<li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
<li>{{jsxref("Function")}}</li>
<li>{{jsxref("Statements/function", "function statement")}}</li>
<li>{{jsxref("Statements/function*", "function* statement")}}</li>
<li>{{jsxref("Operators/function*", "function* expression")}}</li>
<li>{{jsxref("GeneratorFunction")}}</li>
</ul>
|
