diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
| commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
| tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/uk/web/javascript/reference/global_objects/function/name | |
| parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
| download | translated-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.html | 223 |
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> |
