aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/javascript/reference/global_objects/function/index.html
blob: 4b6b4f5825d4565b8ed9e365eec8d03b7dee06fb (plain)
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
---
title: Function
slug: Web/JavaScript/Reference/Global_Objects/Function
tags:
  - JavaScript
  - Конструктор
  - Функция
translation_of: Web/JavaScript/Reference/Global_Objects/Function
---
<div>{{JSRef("Global_Objects", "Function")}}</div>

<p>{{JSRef}}</p>

<p><strong><code>Function</code> constructor</strong> создает новый объект <code>Function</code>. Вызов <code>constructor</code> создает функцию динамически, но страдает от проблем безопасности и аналогичных (но гораздо менее значительных) проблем производительности {{jsxref("eval")}}. Однако, в отличие от eval, конструктор функций создает функции, которые выполняются только в глобальной области..</p>

<p>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</p>

<div class="hidden">
<p>Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект interactive examples, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
</div>

<p>Каждая функция JavaScript на самом деле является объектом функции. Это можно увидеть с помощью кода <code>(function(){}).constructor === Function</code> которая возвращает true.</p>

<h2 id="Syntax" name="Syntax">Синтаксис</h2>

<pre class="syntaxbox"><code>new Function([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>

<h3 id="Parameters" name="Parameters">Параметры</h3>

<dl>
 <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
 <dd>Имена, используемые функцией в качестве имён формальных аргументов. Каждое имя должно быть строкой, представляющий допустимый идентификатор JavaScript, либо списком таких строк, разделённых запятой; например "<code>x</code>", "<code>theValue</code>" или "<code>a,b</code>".</dd>
 <dt><code>functionBody</code></dt>
 <dd>Строка, содержащая инструкции JavaScript, составляющие определение функции.</dd>
</dl>

<h2 id="Description" name="Description">Описание</h2>

<p>Объекты <code>Function</code>, созданные конструктором <code>Function</code>, разбираются при создании функции. Это менее эффективно определения функции при помощи <a href="/ru/docs/Web/JavaScript/Reference/Operators/function">выражения <code>function</code></a> или <a href="/ru/docs/Web/JavaScript/Reference/Statements/function">инструкции <code>function</code></a> и вызова её внутри вашего кода, поскольку такие функции разбираются вместе с остальным кодом.</p>

<p>Все аргументы, переданные в функцию, трактуются как имена идентификаторов параметров создаваемой функции, и имеют тот же порядок следования, что и при их передаче в конструктор функции.</p>

<div class="note">
<p><strong>Примечание:</strong> функции, созданные конструктором <code>Function</code>, не создают замыканий на их контексты создания; они всегда создаются в глобальной области видимости. При их вызове, они получат доступ только к своим локальным переменным и переменным из глобальной области видимости, но не к переменным в той области видимости, в которой вызывался конструктор <code>Function</code>. Это поведение отличается от поведения при использовании функции {{jsxref("Global_Objects/eval", "eval")}} с кодом создания функции.</p>
</div>

<p>Вызов конструктора <code>Function</code> как функции (без использования оператора <code>new</code>) имеет тот же самый эффект, что и вызов его как конструктора.</p>

<h2 id="Properties_and_Methods_of_Function" name="Properties_and_Methods_of_Function">Свойства и методы объекта <code>Function</code></h2>

<p>Глобальный объект <code>Function</code> не имеет собственных методов или свойств, однако, поскольку он сам является функцией, он наследует некоторые методы и свойства через цепочку прототипов объекта {{jsxref("Function.prototype")}}.</p>

<h2 id="Function_prototype_object" name="Function_prototype_object">Прототип объекта <code>Function</code></h2>

<h3 id="Properties" name="Properties">Свойства</h3>

<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div>

<h3 id="Methods" name="Methods">Методы</h3>

<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div>

<h2 id="Function_instances" name="Function_instances">Экземпляры объекта <code>Function</code></h2>

<p>Экземпляры объекта <code>Function</code> наследуют методы и свойства из объекта {{jsxref("Function.prototype")}}. Как и со всеми другими конструкторами, вы можете изменить объект прототипа конструктора для применения изменений ко всем экземплярам объекта <code>Function</code>.</p>

<h2 id="Examples" name="Examples">Примеры</h2>

<h3 id="Example_Specifying_arguments_with_the_Function_constructor" name="Example:_Specifying_arguments_with_the_Function_constructor">Пример: указание аргументов в конструкторе <code>Function</code></h3>

<p>Следующий код создаёт объект <code>Function</code>, который принимает два аргумента.</p>

<pre class="brush: js">// Пример может быть запущен непосредственно в вашей консоли JavaScript

// Создаём функцию, принимающую два аргумента, и возвращающую их сумму
var adder = new Function('a', 'b', 'return a + b');

// Вызываем функцию
adder(2, 6);
// &gt; 8
</pre>

<p>Аргументы "<code>a</code>" и "<code>b</code>" являются именами формальных аргументов, которые используются в теле функции, "<code>return a + b</code>".</p>

<h3 id="Example_A_recursive_shortcut_to_massively_modify_the_DOM" name="Example:_A_recursive_shortcut_to_massively_modify_the_DOM">Пример: рекурсивное сокращение для массового изменения DOM</h3>

<p>Создание функции через конструктор <code>Function</code> - это один из способов динамического создания из функции неизвестного количества новых объектов с некоторым выполняемым кодом в глобальной области видимости. Следующий пример (a рекурсивное сокращение для массового изменения DOM) был бы невозможен без вызова конструктора <code>Function</code> для каждого нового запроса, если вы хотите избежать использования замыканий.</p>

<pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;Пример MDN - рекурсивное сокращение для массового изменения DOM&lt;/title&gt;
&lt;script type="text/javascript"&gt;
var domQuery = (function() {
  var aDOMFunc = [
    Element.prototype.removeAttribute,
    Element.prototype.setAttribute,
    CSSStyleDeclaration.prototype.removeProperty,
    CSSStyleDeclaration.prototype.setProperty
  ];

  function setSomething(bStyle, sProp, sVal) {
    var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle &lt;&lt; 1],
        aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2),
        aNodeList = bStyle ? this.cssNodes : this.nodes;

    if (bSet &amp;&amp; bStyle) { aArgs.push(''); }
    for (
      var nItem = 0, nLen = this.nodes.length;
      nItem &lt; nLen;
      fAction.apply(aNodeList[nItem++], aArgs)
    );
    this.follow = setSomething.caller;
    return this;
  }

  function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); }
  function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); }
  function getSelectors() { return this.selectors; };
  function getNodes() { return this.nodes; };

  return (function(sSelectors) {
    var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);');
    oQuery.selectors = sSelectors;
    oQuery.nodes = document.querySelectorAll(sSelectors);
    oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; });
    oQuery.attributes = setAttribs;
    oQuery.inlineStyle = setStyles;
    oQuery.follow = getNodes;
    oQuery.toString = getSelectors;
    oQuery.valueOf = getNodes;
    return oQuery;
  });
})();
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div class="testClass"&gt;Lorem ipsum&lt;/div&gt;
&lt;p&gt;Некоторый текст&lt;/p&gt;
&lt;div class="testClass"&gt;dolor sit amet&lt;/div&gt;

&lt;script type="text/javascript"&gt;
domQuery('.testClass')
  .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum')
  .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px');
&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</pre>

<h2 id="Specifications" name="Specifications">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарии</th>
  </tr>
  <tr>
   <td>ECMAScript 1-е издание.</td>
   <td>Стандарт</td>
   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>

<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

<p>{{Compat("javascript.builtins.Function")}}</p>

<h2 id="See_also" name="See_also">Смотрите также</h2>

<ul>
 <li>{{jsxref("Functions_and_function_scope", "Функции и их область видимости", "", 1)}}</li>
 <li>{{jsxref("Function")}}</li>
 <li>{{jsxref("Statements/function", "инструкция function", "", 1)}}</li>
 <li>{{jsxref("Operators/function", "выражение function", "", 1)}}</li>
 <li>{{jsxref("Statements/function*", "инструкция function*", "", 1)}}</li>
 <li>{{jsxref("Operators/function*", "выражение function*", "", 1)}}</li>
 <li>{{jsxref("GeneratorFunction")}}</li>
</ul>