aboutsummaryrefslogtreecommitdiff
path: root/files/uk/web/javascript/reference/global_objects/function/name
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:43:23 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:43:23 -0500
commit218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch)
treea9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/uk/web/javascript/reference/global_objects/function/name
parent074785cea106179cb3305637055ab0a009ca74f2 (diff)
downloadtranslated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip
initial commit
Diffstat (limited to 'files/uk/web/javascript/reference/global_objects/function/name')
-rw-r--r--files/uk/web/javascript/reference/global_objects/function/name/index.html223
1 files changed, 223 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/global_objects/function/name/index.html b/files/uk/web/javascript/reference/global_objects/function/name/index.html
new file mode 100644
index 0000000000..9fa89c9f14
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/name/index.html
@@ -0,0 +1,223 @@
+---
+title: Function.name
+slug: Web/JavaScript/Reference/Global_Objects/Function/name
+tags:
+ - ECMAScript 2015
+ - Function
+ - JavaScript
+ - Властивість
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/name
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість тільки для читання об'єкта {{jsxref("Function")}} <code><strong>name</strong></code> відображає ім'я функції, яке було вказане при створенні, або <code>"anonymous"</code> для анонімних функцій.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/function-name.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p>{{js_property_attributes(0,0,1)}}</p>
+
+<div class="blockIndicator note">
+<p>Зауважте, що у нестандартних реалізаціях до ES2015 атрибут <code>configurable</code> (доступний для налаштування) також мав значення <code>false</code>.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Ім'я_функції">Ім'я функції</h3>
+
+<p>Властивість <code>name</code> повертає ім'я функції.</p>
+
+<pre class="brush: js">function doSomething() {}
+console.log(doSomething.name); // "doSomething"
+</pre>
+
+<h3 id="Ім'я_конструктора_функції">Ім'я конструктора функції</h3>
+
+<p>Функції, створені за допомогою <code>new Function(...)</code> або просто <code>Function(...)</code> створюють об'єкти {{jsxref("Function")}}, а їхнє ім'я "anonymous".</p>
+
+<pre class="brush: js">(new Function).name; // "anonymous"</pre>
+
+<h3 id="Виведені_імена_функцій">Виведені імена функцій</h3>
+
+<p>Змінні та методи можуть вивести ім'я анонімної функції з її синтаксичної позиції (нове у ECMAScript 2015).</p>
+
+<pre class="brush: js">var f = function() {};
+var object = {
+ someMethod: function() {}
+};
+
+console.log(f.name); // "f"
+console.log(object.someMethod.name); // "someMethod"
+</pre>
+
+<p>Ви можете оголосити функцію з ім'ям у {{jsxref("Operators/Function", "функціональному виразі", "", 1)}}:</p>
+
+<pre class="brush: js">var object = {
+ someMethod: function object_someMethod() {}
+};
+console.log(object.someMethod.name); // виведе "object_someMethod"
+
+try { object_someMethod } catch(e) { console.log(e); }
+// ReferenceError: object_someMethod is not defined
+</pre>
+
+<p>Ви не можете змінювати ім'я функції, ця властивість доступна лише для читання:</p>
+
+<div class="hidden">
+<p>Наведений нижче приклад суперечить тому, що сказано на початку цього розділу і не працює як описано.</p>
+</div>
+
+<pre class="brush: js">var object = {
+ // anonymous
+ someMethod: function() {}
+};
+
+object.someMethod.name = 'otherMethod';
+console.log(object.someMethod.name); // someMethod
+</pre>
+
+<p>Однак, щоб змінити її, ви можете скористатись {{jsxref("Object.defineProperty()")}}.</p>
+
+<h3 id="Імена_лаконічних_методів">Імена лаконічних методів</h3>
+
+<pre class="brush: js">var o = {
+ foo(){}
+};
+o.foo.name; // "foo";</pre>
+
+<h3 id="Імена_зв'язаних_функцій">Імена зв'язаних функцій</h3>
+
+<p>Метод {{jsxref("Function.bind()")}} створює функцію, чиїм ім'ям буде "bound" плюс ім'я функції.</p>
+
+<pre class="brush: js">function foo() {};
+foo.bind({}).name; // "bound foo"</pre>
+
+<h3 id="Імена_функцій_для_гетерів_та_сетерів">Імена функцій для гетерів та сетерів</h3>
+
+<p>При використанні властивостей-аксесорів <code><a href="/uk/docs/Web/JavaScript/Reference/Functions/get">get</a></code> та <code><a href="/uk/docs/Web/JavaScript/Reference/Functions/set">set</a></code> у імені функції з'являється "get" або "set".</p>
+
+<pre class="brush: js">let o = {
+ get foo(){},
+ set foo(x){}
+};
+
+var descriptor = Object.getOwnPropertyDescriptor(o, "foo");
+descriptor.get.name; // "get foo"
+descriptor.set.name; // "set foo";</pre>
+
+<h3 id="Імена_функцій_у_класах">Імена функцій у класах</h3>
+
+<p>Ви можете скористатись <code>obj.constructor.name</code>, щоб перевірити "клас" об'єкта (але обов'язково прочитайте застереження нижче):</p>
+
+<pre class="brush: js">function Foo() {} // Синтаксис ES2015: class Foo {}
+
+var fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // виводить "Foo"</pre>
+
+<div class="blockIndicator warning">
+<p><strong>Застереження:</strong> Інтерпретатор коду встановить значення вбудованої властивості <code>Function.name</code> тільки якщо функція не має своєї властивості з назвою <em>name</em> (дивіться розділ <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname">9.2.11 ECMAScript2015 Language Specification</a>). Однак, ES2015 визначає ключове слово <em>static</em> таким чином, що статичні методі встановлюються як OwnProperty функції-конструктора класу (ECMAScript2015, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation">14.5.14.21.b</a>+ <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation">12.2.6.9</a>).</p>
+</div>
+
+<p>І тому ми не можемо отримати ім'я класу фактично для жодного класу, що має статичний метод <code>name()</code>:</p>
+
+<pre class="brush: js">class Foo {
+ constructor() {}
+ static name() {}
+}</pre>
+
+<p>З методом <code>static name()</code>, <code>Foo.name</code> тепер містить не ім'я класу, а посилання на функцію <code>name()</code>. Наведене вище оголошення класу у синтаксисі ES2015 буде поводитись у Chrome чи Firefox схоже на наступний фрагмент коду у синтаксисі ES5:</p>
+
+<pre class="brush: js">function Foo() {}
+Object.defineProperty(Foo, 'name', { writable: true });
+Foo.name = function() {};</pre>
+
+<p>Спроба отримати клас <code>fooInstance</code> через <code>fooInstance.constructor.name</code> поверне нам зовсім не ім'я класу, а посилання на статичний метод класу. Приклад:</p>
+
+<pre class="brush: js">let fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // виводить function name()</pre>
+
+<p>Ви могли також побачити у прикладі з синтаксисом ES5, що у Chrome чи Firefox наше статичне оголошення <code>Foo.name</code> стає <em>доступним для запису</em>. Вбудоване оголошення за відсутності користувацького статичного методу є <em>доступним лише для читання</em>:</p>
+
+<pre class="brush: js">Foo.name = 'Привіт';
+console.log(Foo.name);
+// виведе "Привіт", якщо клас має статичну властивість name(), інакше виведе "Foo".</pre>
+
+<p>Таким чином, не можна розраховувати, що вбудована властивість <code>Function.name</code> завжди міститиме ім'я класу.</p>
+
+<h3 id="Символи_в_якості_імен_функцій">Символи в якості імен функцій</h3>
+
+<p>Якщо {{jsxref("Symbol")}} використовується в якості імені функції і має опис, ім'ям метода буде опис у квадратних дужках.</p>
+
+<pre class="brush: js">let sym1 = Symbol("foo");
+let sym2 = Symbol();
+let o = {
+ [sym1]: function(){},
+ [sym2]: function(){}
+};
+
+o[sym1].name; // "[foo]"
+o[sym2].name; // ""</pre>
+
+<h2 id="Компресори_та_мініфікатори_JavaScript">Компресори та мініфікатори JavaScript</h2>
+
+<div class="blockIndicator warning">
+<p><strong>Застереження:</strong> Будьте обережні, використовуючи <code>Function.name</code> та перетворення коду, які здійснюють компресори (мініфікатори) або обфускатори JavaScript. Ці інструменти часто використовуються як частина конвеєра збірки JavaScript, щоб зменшити розмір програми перед розгортанням  у виробничому середовищі. Такі перетворення часто змінюють ім'я функції під час збірки.</p>
+</div>
+
+<p>Подібний першокод:</p>
+
+<pre class="brush: js">function Foo() {};
+let foo = new Foo();
+
+if (foo.constructor.name === 'Foo') {
+ console.log("'foo' є екземпляром 'Foo'");
+} else {
+ console.log('Ой-ой!');
+}</pre>
+
+<p>може бути стиснутий до:</p>
+
+<pre class="brush: js">function a() {};
+let b = new a();
+if (b.constructor.name === 'Foo') {
+ console.log("'foo' є екземпляром 'Foo'");
+} else {
+ console.log('Ой-ой!');
+}</pre>
+
+<p>У нестиснутій версії, програма виконує правдиву гілку і виводить <code>"'foo' є екземпляром 'Foo'"</code>. В той час, як у стиснутій версії вона поводиться по-іншому і виконує гілку else. Якщо ви покладаєтесь на <code>Function.name</code>, як у наведеному вище прикладі, переконайтесь, що ваш конвеєр збірки не змінює імена функцій, або не припускайте, що функція матиме певне ім'я.</p>
+
+<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('ES6', '#sec-name', 'name')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td>Початкове визначення.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-name', 'name')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</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.name")}}</p>
+
+<div id="compat-mobile"></div>