Updating main page of Function object (#2414)

* Обновление главной объекта Function

* Перевод конструктора Function

* Apply suggestions from code review

Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>

* Fix broken link

Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>

3 files changed, 171 insertions, 196 deletions

diff --git a/files/ru/web/javascript/reference/global_objects/function/function/index.md b/files/ru/web/javascript/reference/global_objects/function/function/index.md
new file mode 100644
index 0000000000..610c5b6b58
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/function/index.md
@@ -0,0 +1,79 @@
+---
+title: Конструктор Function()
+slug: Web/JavaScript/Reference/Global_Objects/Function/Function
+tags:
+  - Конструктор
+  - Function
+  - JavaScript
+  - Справочник
+browser-compat: javascript.builtins.Function.Function
+---
+{{JSRef}}
+
+**Конструктор `Function`** создаёт новый **объект** `Function`. Вызов конструктора напрямую позволяет создавать функции программным путём, однако такой способ представляет угрозу для безопасности, а также несёт разные (хотя не такие значительные) проблемы с производительностью при использовании с {{jsxref("Global_Objects/eval")}}. Однако в отличие от eval, конструктор `Function` создаёт функции, выполняемые только в глобальной области видимости.
+
+{{EmbedInteractiveExample("pages/js/function-constructor.html","shorter")}}
+
+## Синтаксис
+
+```js
+new Function(arg1, functionBody)
+new Function(arg1, arg2, functionBody)
+new Function(arg1, ... , argN, functionBody)
+```
+
+### Параметры
+
+- `arg1, arg2, ... argN`
+
+  - : Имена, используемые функцией в качестве имён формальных аргументов. Каждое имя должно быть строкой с правильным JavaScript-значением (либо [идентификатором](/ru/docs/Glossary/Identifier), [оставшимся параметром](/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters), или [деструктурирующим присваиванием](/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), либо списком таких строк, разделённых запятой.
+
+    Поскольку параметры разбираются так же, как и объявления функций, допускается использование пробелов и комментариев. Например: `"x", "theValue = 42", "[a, b] /* numbers */"` — или `"x, theValue = 42, [a, b] /* numbers */"`. (`"x, theValue = 42", "[a, b]"` также будет правильным, хотя трудно читаемым).
+
+- `functionBody`
+  - : Строка, содержащая инструкции JavaScript, составляющие определение функции.
+
+## Описание
+
+Объекты `Function`, созданные конструктором `Function`, разбираются при создании функции. Определение функции при помощи {{jsxref("Operators/function", "выражения function", "", 1)}} или {{jsxref("Statements/function", "инструкции function", "", 1)}} и вызова её внутри вашего кода более эффективно, поскольку такие функции разбираются вместе с остальным кодом.
+
+Все аргументы, переданные в функцию, трактуются как имена идентификаторов параметров создаваемой функции, и имеют тот же порядок следования, что и при их передаче в конструктор функции. Если опустить аргумент, то значение этого параметра будет `undefined`.
+
+Вызов конструктора `Function` как функции (без использования оператора `new`) имеет тот же самый эффект, что и вызов его как конструктора.
+
+## Примеры
+
+### Пример: указание аргументов в конструкторе Function
+
+Следующий код создаёт объект `Function, который принимает два аргумента.
+
+```js
+// Пример может быть запущен непосредственно в вашей консоли JavaScript
+
+// Создаём функцию, принимающую два аргумента, и возвращающую их сумму
+const adder = new Function('a', 'b', 'return a + b');
+
+// Вызываем функцию
+adder(2, 6);
+// 8
+```
+
+Аргументы "`a`" и "`b`" являются именами формальных аргументов, которые используются в теле функции, "`return a + b`".
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{jsxref("Functions", "Функции и их область видимости", "", 1)}}
+- Инструкция {{jsxref("Statements/function", "function")}}
+- Выражение {{jsxref("Operators/function", "function")}}
+- Инструкция {{jsxref("Statements/function*", "function*")}}
+- Выражение {{jsxref("Operators/function*", "function*")}}
+- {{jsxref("AsyncFunction")}}
+- {{jsxref("GeneratorFunction")}}
diff --git a/files/ru/web/javascript/reference/global_objects/function/index.html b/files/ru/web/javascript/reference/global_objects/function/index.html
deleted file mode 100644
index fecafa06de..0000000000
--- a/files/ru/web/javascript/reference/global_objects/function/index.html
+++ /dev/null
@@ -1,196 +0,0 @@
----
-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>
-
-<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>
diff --git a/files/ru/web/javascript/reference/global_objects/function/index.md b/files/ru/web/javascript/reference/global_objects/function/index.md
new file mode 100644
index 0000000000..09939fcbe5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/index.md
@@ -0,0 +1,92 @@
+---
+title: Function
+slug: Web/JavaScript/Reference/Global_Objects/Function
+tags:
+  - Класс
+  - Function
+  - JavaScript
+browser-compat: javascript.builtins.Function
+---
+{{JSRef}}
+
+На самом деле каждая JavaScript-функция является объектом `Function`. Это легко проверить, выполнив проверку `(function(){}).constructor === Function`, которая вернёт true.
+
+## Конструктор
+
+- {{jsxref("Function/Function", "Function()")}}
+  - : Создаёт новый объект `Function`. Вызов конструктора напрямую позволяет создавать функции программным путём. Такой способ представляет угрозу для безопасности, а также несёт разные (хотя не такие значительные) проблемы с производительностью при использовании с {{jsxref("Global_Objects/eval")}}. Однако в отличие от eval, конструктор `Function` создаёт функции, выполняемые только в глобальной области видимости.
+
+## Свойства экземпляра
+
+- {{jsxref("Function.prototype.arguments")}}
+  - : Массив с переданными функции аргументами.
+    Это устаревшее свойство объекта {{jsxref("Function")}}. Вместо него используйте объект {{jsxref("Functions/arguments", "arguments")}} (доступный внутри функции).
+- {{jsxref("Function.prototype.caller")}}
+  - : Содержит функцию, которая вызвала текущую выполняющуюся функцию.
+    Это устаревшее свойство, которое работает только в функциях без включённого строгого режима.
+- {{jsxref("Function.prototype.displayName")}}
+  - : Отображаемое имя функции.
+- {{jsxref("Function.prototype.length")}}
+  - : Содержит количество аргументов в функции.
+- {{jsxref("Function.prototype.name")}}
+  - : Имя функции.
+
+## Методы экземпляра
+
+- {{jsxref("Function.prototype.apply()", "Function.prototype.apply(<var>thisArg</var> [, <var>argsArray</var>])")}}
+  - : Вызывает функцию и устанавливает её `this` на переданный `thisArg`. Аргументы могут быть переданы в виде объекта {{jsxref("Array")}}.
+- {{jsxref("Function.prototype.bind()", "Function.prototype.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]]])")}}
+  - : Создает новую функцию, при вызове которой её `this` будет установлен на `thisArg`. Можно также указать ряд аргументов, которые будут добавлены к аргументам при вызове новой привязанной функции.
+- {{jsxref("Function.prototype.call()", "Function.prototype.call(<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>])")}}
+  - : Вызывает функцию и устанавливает её `this` на переданное значение. Аргументы могут быть переданы как есть.
+- {{jsxref("Function.prototype.toString()", "Function.prototype.toString()")}}
+  - : Возвращает строку с исходным кодом функции.
+    Переопределяет метод {{jsxref("Object.prototype.toString")}}.
+
+## Примеры
+
+### Сравнение конструктора Function и объявления функции
+
+Функции, созданные через конструктор `Function`, не имеют доступа к собственному контексту исполнения, т.е. они всегда создаются в глобальной области видимости. При выполнении таких функций, они смогут обращаться только к своим локальным и глобальным переменным, но не к переменным в той области видимости, в которой вызывался конструктор `Function`. В этом они отличаются от использования {{jsxref("Global_Objects/eval")}} с функциями-выражениями.
+
+```js
+var x = 10;
+
+function createFunction1() {
+    var x = 20;
+    return new Function('return x;'); // здесь |x| ссылается на глобальный |x|
+}
+
+function createFunction2() {
+    var x = 20;
+    function f() {
+        return x; // здесь |x| ссылается на локальный |x| выше
+    }
+    return f;
+}
+
+var f1 = createFunction1();
+console.log(f1());          // 10
+var f2 = createFunction2();
+console.log(f2());          // 20
+```
+
+Хотя этот код работает в браузерах, в окружении Node.js вызов `f1()` приведёт к ошибке `ReferenceError`, потому что `x` не будет найден. Это происходит из-за того, что область видимости верхнего уровня в Node не является глобальной областью видимости, поэтому `x` ссылается на локальную переменную в пределах текущего модуля.
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{jsxref("Functions", "Функции и их область видимости", "", 1)}}
+- Инструкция {{jsxref("Statements/function", "function")}}
+- Выражение {{jsxref("Operators/function", "function")}}
+- Инструкция {{jsxref("Statements/function*", "function*")}}
+- Выражение {{jsxref("Operators/function*", "function*")}}
+- {{jsxref("AsyncFunction")}}
+- {{jsxref("GeneratorFunction")}}