path: root/files/uk/web/javascript/reference/global_objects/function/name/index.html

---
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>