From 710fa0fca853831ec2ef87b66b932d3927ad0c7f Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sat, 11 Sep 2021 13:00:42 +0300 Subject: Updating main page of Function object (#2414) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Обновление главной объекта 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> --- .../global_objects/function/function/index.md | 79 +++++++++ .../reference/global_objects/function/index.html | 196 --------------------- .../reference/global_objects/function/index.md | 92 ++++++++++ 3 files changed, 171 insertions(+), 196 deletions(-) create mode 100644 files/ru/web/javascript/reference/global_objects/function/function/index.md delete mode 100644 files/ru/web/javascript/reference/global_objects/function/index.html create mode 100644 files/ru/web/javascript/reference/global_objects/function/index.md (limited to 'files') 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 ---- -
{{JSRef("Global_Objects", "Function")}}
- -

{{JSRef}}

- -

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

- -

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

- - - -

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

- -

Синтаксис

- -
new Function([arg1[, arg2[, ...argN]],] functionBody)
- -

Параметры

- -
-
arg1, arg2, ... argN
-
Имена, используемые функцией в качестве имён формальных аргументов. Каждое имя должно быть строкой, представляющий допустимый идентификатор JavaScript, либо списком таких строк, разделённых запятой; например "x", "theValue" или "a,b".
-
functionBody
-
Строка, содержащая инструкции JavaScript, составляющие определение функции.
-
- -

Описание

- -

Объекты Function, созданные конструктором Function, разбираются при создании функции. Это менее эффективно определения функции при помощи выражения function или инструкции function и вызова её внутри вашего кода, поскольку такие функции разбираются вместе с остальным кодом.

- -

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

- -
-

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

-
- -

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

- -

Свойства и методы объекта Function

- -

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

- -

Прототип объекта Function

- -

Свойства

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

Методы

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

Экземпляры объекта Function

- -

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

- -

Примеры

- -

Пример: указание аргументов в конструкторе Function

- -

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

- -
// Пример может быть запущен непосредственно в вашей консоли JavaScript
-
-// Создаём функцию, принимающую два аргумента, и возвращающую их сумму
-var adder = new Function('a', 'b', 'return a + b');
-
-// Вызываем функцию
-adder(2, 6);
-// > 8
-
- -

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

- -

Пример: рекурсивное сокращение для массового изменения DOM

- -

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

- -
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Пример MDN - рекурсивное сокращение для массового изменения DOM</title>
-<script type="text/javascript">
-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 << 1],
-        aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2),
-        aNodeList = bStyle ? this.cssNodes : this.nodes;
-
-    if (bSet && bStyle) { aArgs.push(''); }
-    for (
-      var nItem = 0, nLen = this.nodes.length;
-      nItem < 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;
-  });
-})();
-</script>
-</head>
-
-<body>
-
-<div class="testClass">Lorem ipsum</div>
-<p>Некоторый текст</p>
-<div class="testClass">dolor sit amet</div>
-
-<script type="text/javascript">
-domQuery('.testClass')
-  .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum')
-  .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px');
-</script>
-</body>
-
-</html>
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарии
ECMAScript 1-е издание.СтандартИзначальное определение. Реализована в JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.3', 'Function')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-objects', 'Function')}}{{Spec2('ES6')}}
- -

Совместимость с браузерами

- -

{{Compat("javascript.builtins.Function")}}

- -

Смотрите также

- - 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(thisArg [, argsArray])")}} + - : Вызывает функцию и устанавливает её `this` на переданный `thisArg`. Аргументы могут быть переданы в виде объекта {{jsxref("Array")}}. +- {{jsxref("Function.prototype.bind()", "Function.prototype.bind(thisArg[, arg1[, arg2[, ...argN]]])")}} + - : Создает новую функцию, при вызове которой её `this` будет установлен на `thisArg`. Можно также указать ряд аргументов, которые будут добавлены к аргументам при вызове новой привязанной функции. +- {{jsxref("Function.prototype.call()", "Function.prototype.call(thisArg[, arg1, arg2, ...argN])")}} + - : Вызывает функцию и устанавливает её `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")}} -- cgit v1.2.3-54-g00ecf